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