はじめに
どーも、入田 / ぐるたか
@guru_taka です!
本記事では
Next.js に Tailwind CSS を導入する方法を紹介します。また、
VS Code で Tailwind CSS での開発がしやすくなる Tips もまとめていますので、参考にしてみてください!
バージョン情報
- node:15.11.0
- react: 17.0.2
- react-dom: 17.0.2
- next: 11.0.1
- autoprefixer: 10.2.6
- postcss: 8.3.5
- tailwindcss: 2.2.4
Tailwind CSS とは?
Tailwind CSS とは、
ユーティリティファーストの CSS フレームワークになります。CSS フレームワークで有名な
Bootstrap のように、デザインが整ったコンポーネントがあるのではなく、
デザインを整えるときに便利かつシンプルな機能を寄せ集めたイメージです。
Tailwind CSS で用意されたクラスをベースに、デザインを整えます。例えば padding
を 0
にしたい場合、Tailwind CSS では、p-0
と class 属性に代入するだけで実現可能。スタイルファイル内のコード量も抑えられます。
また、パフォーマンスの最適化もされており、2021/07/19 時点で、ホットな CSS フレームワークです。fwywd チームでは、基本的に Tailwind CSS を使用して、スタイリングを行っています。
Tailwind CSS 導入の全体像
Next.js (JavaScript) と Next.js (TypeScript) で全体像が少しだけ変わります。
- Next.js (JavaScript)
- ① Next.js (JavaScript) + Tailwind CSS の新規プロジェクトを作成
- Next.js (TypeScript)
- ① Next.js (TypeScript) の新規プロジェクトを作成
- ② Tailwind CSS の導入
- ③ 設定ファイルの作成
Next.js (JavaScript) に Tailwind CSS を導入する方法
1. Next.js (JavaScript) + Tailwind CSS の新規プロジェクトを作成
Next.js (JavaScript) で開発する場合は、以下のコマンドを実行するだけで、Tailwind CSS 搭載の新規プロジェクトが作成できます!
コマンドは以下の通りです。
# npm の場合
npx create-next-app next-tailwind -e with-tailwindcss
# yarn の場合
yarn create next-app next-tailwind -e with-tailwindcss
ディレクトリ構造は以下のようになります。
├── .gitignore
├── README.md
├── node_modules
├── package.json
├── pages
├── postcss.config.js
├── public
├── tailwind.config.js
└── yarn.lock
pages/index.js
のファイルを確認してみると、すでに Tailwind CSS を用いた装飾がされています!
// pages/index.js
...
<h1 className="text-6xl font-bold">
Welcome to{' '}
<a className="text-blue-600" href="https://nextjs.org">
Next.js!
</a>
</h1>
...
以下コマンドを実行しましょう。
# npm の場合
npm run dev
# yarn の場合
yarn dev
下図のように、Tailwind CSS で装飾されたページが表示されれば成功です!
Tailwind CSS の関連パッケージや設定ファイルが気になる方や既存プロジェクトに Tailwind CSS を導入したい方は、以降で紹介する Next.js (TypeScript) における Tailwind CSS の導入方法で解説します。ぜひご覧ください!
Next.js (TypeScript) に Tailwind CSS を導入する方法
1. Next.js (TypeScript) の新規プロジェクトを作成
まず、以下コマンドで Next.js (TypeScript) の新規プロジェクトを作成しましょう。2021/07/19 時点で、Tailwind CSS + TypeScript 搭載の Next.js の公式サンプルがないため、Next.js (TypeScript) のプロジェクトを作成し、Tailwind CSS を導入します。
# npm の場合
npx create-next-app next-ts-tailwind --typescript
# yarn の場合
yarn create next-app next-ts-tailwind --typescript
ディレクトリ構造は以下の通りです。
├── .eslintrc
├── .gitignore
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── pages
├── public
├── styles
├── tsconfig.json
└── yarn.lock
2. Tailwind CSS の導入
Tailwind CSS を導入するため、Next.js のプロジェクトに、以下 3 つのパッケージをインストールします。
上記パッケージをインストールするコマンドは以下の通りです。
# npm の場合
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# yarn の場合
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
3. 設定ファイルの作成
続いて、Tailwind CSS に関連する設定ファイルを作成します。まず、以下のコマンドを実行して、初期化を行います。
# 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: {},
},
};
Tailwind CSS では、tailwind.config.js
内にある purge
オプションを設定することで、ビルド生成時の未使用のスタイルを除外し、パフォーマンスの最適化を行えます。今回は pages
と components
ディレクトリ内を purge
の対象範囲とします。変更するコードは以下の通りです。
// tailwind.config.js
module.exports = {
// 追記
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
続いて、 JIT (just-in-time) mode を適用するために、設定ファイルを変更します。JIT mode とは、必要に応じてスタイルを反映するモード(厳密には、コンパイラ)で、以下のようなメリットがあります!
- ビルド時間が非常に速い
- 開発時のブラウザパフォーマンスが良くなる
- カスタマイズが容易になる
このように JIT mode には強力な機能が搭載されているため、適用することを強くオススメします。設定方法は以下の通りです。
// tailwind.config.js
module.exports = {
// 追記
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
最後に、Tailwind CSS のファイルを pages/_app.tsx
で読み込むようにし、グローバルで適用させましょう。コードは以下の通りです。
// pages/_app.tsx
// Tailwind CSS 以外のスタイルファイルはグローバルで適用したくないため削除
// import '../styles/globals.css'
// 追記
import 'tailwindcss/tailwind.css';
import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;
以上で設定は完了です。実際に、動作確認をしてみましょう!
このように開発環境において、リアルタイムに Tailwind CSS のスタイルが反映されれば成功です!
Tailwind CSS の補完が効く VS Code の拡張機能
eslint-plugin-tailwindcss を導入すると、更に便利!
まず、以下のコマンドを実行し、eslint-plugin-tailwindcss をインストールしましょう。
# npm の場合
npm install -D eslint-plugin-tailwindcss
# yarn の場合
yarn add -D eslint-plugin-tailwindcss
続いて、ESLint の設定ファイル .eslintrc
に、以下の変更を加えます。
// .eslintrc
{
"extends": [
"next",
"next/core-web-vitals",
"prettier",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:import/warnings",
// 追記
"plugin:tailwindcss/recommended"
],
// 追記
// tailwind.config.js などの config ファイル、ESLint の対象外にする
"ignorePatterns": ["*.config.js"],
"rules": {
"import/order": [
"error",
{
"alphabetize": {
"order": "asc"
}
}
]
}
}
以下のように、Tailwind CSS のクラスの変数がアルファベット順で並ぶようになります。ぜひ導入してみてください!
最後に
以上になります。Next.js (JavaScript/TypeScript) に Tailwind CSS の導入をしたい方の参考になれば幸いです。
ここまでご覧いただき、ありがとうございました!
株式会社キカガク コンテンツマーケティング責任者
入田 / ぐるたか
twitter:
@guru_taka
参考文献