🍸

Next.jsにTailwind CSSを導入する

に公開
CSS
Next.js
Scss
ESLint
Tailwind CSS
tech

仕事でNext.jsにCSSフレームワークのTailwindを導入したので、それのやり方をまとめています。

パッケージのインストール

まずはTailwind CSSを導入するため、以下3つのパッケージをインストールします。

  • tailwindcss
  • postcss
  • autoprefixer
# npm の場合
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# yarn の場合
$ yarn add -D tailwindcss postcss autoprefixer postcss-nested

設定ファイルの作成

以下のコマンドで設定ファイルを作成します。

# npm の場合
$ npx tailwindcss init -p

# yarn の場合
$ yarn tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js
✨  Done in 0.86s.

以下2つの設定ファイルが作成されます。

  • tailwind.config.js
  • postcss.config.js
tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

設定ファイルの適用

purgeオプションを設定することで、ビルド生成時の未使用のスタイルを除外し、パフォーマンスの最適化を行えます。

今回はsrc/pagesとsrc/componentsディレクトリ内をpurgeの対象範囲とします。

tailwind.config.js
module.exports = {
  darkMode: false, // 'media' or 'class'
  purge: {
    content: [
      './src/pages/**/*.{js,ts,jsx,tsx}',
      './src/components/**/*.{js,ts,jsx,tsx}'
    ],
    options: {
      // https://purgecss.com/safelisting.html#patterns
      safelist: {
        standard: [/^bg-/, /^text-/],
      },
    },
  },
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

次にJIT (just-in-time) mode を適用するために、設定ファイルを変更します。
JIT modeとは、必要に応じてスタイルを反映するモード（厳密には、コンパイラ）です。以下のような効果があります。

  • ビルド時間が非常に速い
  • 開発時のブラウザパフォーマンスが良くなる
  • カスタマイズが容易になる

設定方法は以下のようにmode: 'jit'と付けるだけなので、設定しておいた方が良いです。

tailwind.config.js
module.exports = {
  mode: 'jit',
  darkMode: false, // 'media' or 'class',
  purge: {
    content: [
      './src/pages/**/*.{js,ts,jsx,tsx}',
      './src/components/**/*.{js,ts,jsx,tsx}'
    ],
    options: {
      // https://purgecss.com/safelisting.html#patterns
      safelist: {
        standard: [/^bg-/, /^text-/],
      },
    },
  },
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwindを読み込むように適用する

全てのファイルで読み込んでいるglobals.scssに以下を記述することで、tailwindを読み込むようにします。

src/styles/globals.scss
@import "~tailwindcss/base";
@import "~tailwindcss/components";
@import "~tailwindcss/utilities";

これで全てのファイルにtailwindを読み込めるようにします。

ESLintとPrettierを使用している場合

Next.jsでESLintとPrettierを使用している場合は、eslint-plugin-tailwindcssを導入したほうが良いです。

上記に書かれたESLintとPrettierの設定をしていること前提で、eslint-plugin-tailwindcssの導入方法を紹介します。

以下のコマンドを実行して、eslint-plugin-tailwindcssをインストールします。

# npm の場合
npm install -D eslint-plugin-tailwindcss

# yarn の場合
$ yarn add -D eslint-plugin-tailwindcss

ESLintの設定ファイルである.eslintrcに、以下の変更を加えます。

{
  "extends": [
    "next/core-web-vitals",

    // 追記
    "plugin:tailwindcss/recommended"
  ],
  "plugins": ["prettier"],
  // 追記
  // tailwind.config.js などの config ファイル、ESLint の対象外にする
  "ignorePatterns": [
    "*.config.js"
  ],
  "rules": {
    "prettier/prettier": "error",
  }
}

prettier-plugin-tailwindcssを導入する

このプラグインはPrettierで整形するときに、Tailwind CSSのクラスを自動で並び変えてくれるものです。

導入に関してはそれぞれの好みでいれてください。

# npmの場合
$ npm install -D prettier prettier-plugin-tailwindcss

# yarnの場合
$ yarn add -D prettier prettier-plugin-tailwindcss

prettierの設定ファイルであるprettier.config.jsに以下を記述します。

prettier.config.js
module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
}

postcss-nestedの適用

こちらの設定は好みです。
postcss.config.jsに以下を加えます。

postcss-nestedを追加することでsassみたいにネストした書き方ができます。

postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-nested': {},
  },
};

参考資料

https://zenn.dev/nus3/articles/257d724e24a39b756b5a#11.-tailwind-cssを入れる

Discussion