Zenn
📌

Next.jsにTailwind CSS 2.0を導入する

2021/02/17に公開
CSS
Next.js
Tailwind CSS
cssフレーム
tech

概要

Next.jsにTailwind CSS v2を導入する方法 + カスタムカラーの設定について記しています。
なお今回使用したNextやモジュールのバージョンは以下となります。

"next": "10.0.5"
"tailwindcss": "^2.0.3"
"postcss": "^8.2.5"
"autoprefixer": "^10.2.4"

Tailwind CSSを導入

モジュールのインストールする。

$ yarn add --dev tailwindcss

次に設定ファイルを作成する。

$ npx tailwindcss init

同階層にtailwind.config.jsが作成されますので、Purgeオプションを設定します。
Purgeオプションを設定することで使用したクラスのみビルド対象となり、ファイルサイズを小さくできます。

tailwind.config.js
module.exports = {
  purge: [
    './components/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './styles/*.sass',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

今回はcomponentsとpages配下のjs、ts、jsx、tsxファイルで使用されているクラスのみでビルドされます。

最後に、コンパイルするために必要モジュールをインストールします。

$ yarn add --dev postcss autoprefixer

続いて設定ファイル（postcss.config.js）を作成します。

postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.js' },
    autoprefixer: {},
  }
}

以上でTailwind CSSの導入はおわりです。

Tailwind CSSを使用

まずglobals.sass(css)にTailwindの読み込みを行います。

globals.sass
// tailwind
@tailwind base
@tailwind components
@tailwind utilities

次に/pages/index.jsにクラスを付与します。

<div className="z-10 flex flex-col justify-center">
	<h1 className={`text-center font-bold`}>SITE NAME</h1>
	<p className={`text-center font-medium`}>SITE DESCRIPTION</p>
</div>

Tailwind CSSのクラス名は公式ドキュメントやチートシートを確認してください。

カスタマイズ方法

Tailwind CSSでは、設定ファイルのthemeオプションを変更することで、使用するカラーをカスタムやフォントをカスタマイズすることが可能です。今回はカラーのカスタマイズを紹介します。

tailwind.config.js
module.exports = {
  purge: [
    './components/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './styles/*.sass',
  ],
　theme: {
    colors: {
      'off-white': '#F2F2E9',
      'dark-blue': '#333311'
    },
  },
  variants: {},
  plugins: [],
}

tailwind.config.jsのthemeにcolorsに項目を追加しています。
これでフォントや背景のカラーを定義するクラスが作成されます。

text-xxx・・・フォントカラーのクラス
bg-xxx・・・背景色用のクラス

これで独自に定義したカラーをクラスとして使用できます。

<div className="z-10 flex flex-col justify-center bg-dark-blue">
	<h1 className={`text-center font-bold text-off-white`}>SITE NAME</h1>
	<p className={`text-center font-medium`}>SITE DESCRIPTION</p>
</div>

他にもthemeの使い方はありますので、気になる方は公式ドキュメントを確認してみてください。

おわりに

Tailwind CSSのユーティリティファーストな設計思想は、チーム開発の上で扱いやすいCSSフレームではと導入してみました。開発体験が上がるか見ていきたいと思います。

以上。ありがとうございました。

Discussion