[Next.js] CSS ModulesとTailwind CSSを併用する方法

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>
)