【Next.js】Tailwindを導入する方法

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

コメント

  1. 佐藤 より:

    始めてNext+Tailwindをインストールしました。
    参考になりました。ありがとうございました。

    1. yaken より:

      こちらこそ参考にして頂きありがとうございます。
      お力になれたようでよかったです!
      またご丁寧にコメント頂けて大変励みになりました。

コメントを残す

*