前提
ここでは、既存の Next.js（TypeScript）のプロジェクトに Tailwind CSS を導入する方法について記述する。
Next.js（TypeScript）の環境が用意できていない場合は、npx create-next-app@latest --tsコマンドで用意しておく。
Tailwind CSS の導入
Tailwind CSS を導入するために必要な、以下 3 つのパッケージをインストールする
npm install -D tailwindcss postcss autoprefixer
設定ファイルの作成
Tailwind CSS に関する設定ファイル作成を、以下のコマンドを使用して行う。
npx tailwindcss init -p
実行すると、以下の 2 ファイルが作成される
- postcss.config.js
- tailwind.config.js
Tailwind CSS では tailwind.config.js内で設定を記述する。以下のようにして TeailWind CSS を適用するパスを指定する。
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"], // 追記
theme: {
extend: {},
},
plugins: [],
};
最後に、styles/globals.cssに Tailwind CSS の各レイヤーの@tailwindディレクティブを追加する
@tailwind base;
@tailwind components;
@tailwind utilities;
styles/globals.css に @tailwind ディレクティブを入れたとき、VSCode 上で Warning が表示される場合
Windows10 の VSCode で Warning が表示される（？）様子。Tailwind CSS の自体は正常に動作するが。
気になる場合は、VSCode 拡張機能の PostCSS Language Supportを入れると Warning が消えるという報告があるので入れてみるといいかもしれない。
参考：tailwindCSS で import されない。装飾の設定が反映されない問題の対処。 Win10 Next.js VSCode -- Qiita
動作確認
一例として、以下の JSX を追記し、npm run devで開発サーバ―を起動させて「Hello world!」の文字が太字かつ下線がひかれていれば、正常に動作している。
export default function Home() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
VSCode 用 Tailwind CSS 拡張機能
拡張機能 Tailwind CSS IntelliSenseをインストールすると、 Tailwind CSS の保管が効くようになる。