Next.jsにTailwind.cssを導入する方法

HTML/CSS/Sass

Tailwind.cssをインストール

Next.jsのバージョンが10以上の場合

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Next.jsのバージョンが9以下の場合

npm install tailwindcss postcss-flexbugs-fixes postcss-preset-env postcss-import precss -D

tailwind.config.jsとpostcss.config.jsを生成

npx tailwindcss init -p

postcss.config.jsを変更する

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.jsを変更する

purgeの部分を変更しています。purgeは使用しないCSSを除いてくれます。

// tailwind.config.js

module.exports = {
  purge: [
    './pages/**/*.js', // TypeScriptの場合は[.js]ではなく[.tsx]
    './components/**/*.js' // TypeScriptの場合は[.js]ではなく[.tsx]
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

global.cssにtailwind.cssをインポート

// global.css

@import "~tailwindcss/base";
@import "~tailwindcss/components";
@import "~tailwindcss/utilities";

...

完成!

「npm run dev」を実行してください。これでtailwind.cssが適用できるはずです。

「PostCSS plugin postcss-nested requires PostCSS 8」というエラーが出る場合

以下のようなエラーが出ることがありました。

Error: PostCSS plugin tailwindcss requires PostCSS 8.

その際は、以下のコマンドを実行してみてください。

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

このエラーが起きる背景としては、PostCSS8との互換性が全てサポートできていないため、起きているようです。詳しく知りたい方はこちらのページを見てみてください。

タイトルとURLをコピーしました