Next.jsでCSS ModulesとTailwind CSSを併用する方法について説明します。
広告
ソースコード
以下のように書きます。{の次の記号はバッククォートです。
import styles from './styles.module.scss' // ... return ( <div className={`${styles.myClass} mt-2 mb-4`}>Hello</div> )
clsxを使用する場合
ライブラリclsxを使用すると、以下のように書けます。
import styles from './styles.module.scss' import clsx from 'clsx' // ... return ( <div className={clsx(styles.myClass, 'mt-2 mb-4')}>Hello</div> )