Next.jsにTailwind CSSを導入する
仕事で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
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
設定ファイルの適用
purge
オプションを設定することで、ビルド生成時の未使用のスタイルを除外し、パフォーマンスの最適化を行えます。
今回はsrc/pages
とsrc/components
ディレクトリ内をpurgeの対象範囲とします。
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'
と付けるだけなので、設定しておいた方が良いです。
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
を読み込むようにします。
@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
に以下を記述します。
module.exports = {
plugins: [require('prettier-plugin-tailwindcss')],
}
postcss-nestedの適用
こちらの設定は好みです。
postcss.config.js
に以下を加えます。
postcss-nested
を追加することでsass
みたいにネストした書き方ができます。
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-nested': {},
},
};
参考資料
Discussion