Next.jsを利用している中で、Tailwindを導入してみました。

その過程をメモしていきます。

Tailwind CSSをインストールする

$ npm i tailwindcss@latest postcss@latest autoprefixer@latest

「tailwind.config.js」を生成する

$ npx tailwindcss init -p

「tailwind.config.js」を編集する

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",       // 追加
        "./components/**/*.{js,ts,jsx,tsx}",  // 追加(componentsフォルダがある場合)
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

content内の./components/*/.{js,ts,jsx,tsx}の部分は「componentsフォルダ内」のファイルでもTailwind.cssが適用されるようにしています。

他にも適用したいフォルダがある場合には、このcomponentsの部分を変更したり追加したりしてみてください。

「styles/global.css」を編集する

@tailwind base;
@tailwind components;
@tailwind utilities;

元々記載されているCSSは削除かコメントアウトする。

Tailwind導入完了。

これでclassNameにTailwind.cssの記載をすれば反映されます。

Tailwindが反映されない場合の対処法

既にローカルサーバーで起動している場合は、すぐに反映されないことがあります。その場合は再度起動してみてください。

$ npm run dev