Tailwind CSSのインストールおよび初期設定の方法

この記事では、Tailwind CSSとは何か、またインストールや初期設定の方法などを紹介します。

Tailwind CSSとは

Tailwind CSSは、ユーティリティベースのCSSフレームワークです。

実際の使用例を見ると、イメージしやすいと思います。

<div className="text-red-600 font-bold">Tailwind CSS</div>

上記のサンプルでは、「text-red-600」と「font-bold」というクラスを付与しています。これらはTailwind CSSに用意されているユーティリティクラスで、前者はフォントを赤字にして、後者は太字にします。

このようなユーティリティクラスがTailwind CSSには他にも色々と用意されており、それらを組み合わせてデザインを行います。

Tailwind CSSのインストールおよび初期設定

Tailwind CSSを使うにはインストールが必要です。

ここでは、Create Next AppとCreate React Appを使っているプロジェクトに対して、Tailwind CSSをインストールする方法を紹介します。

Create Next Appの場合

まずは、Tailwind CSSをインストールします。以下は公式サイトに記述されているインストールコマンドです。（@latestは省略）

npm install -D tailwindcss postcss autoprefixer

PostCSSは、CSSのプリプロセッサです。

プリプロセッサはCSSを変換する役割があります。PostCSSの他にはSassが有名です。変数やミックスインといった特殊な構文を使って開発速度を上げつつ、最終的にはコンパイルによって通常のCSSに変換します。

Sassは様々な機能が統合されていますが、PostCSSは必要な機能をプラグインとしてインストールします。上記のコマンドの場合、「PostCSSをCSSのプリプロセッサとして使い、Tailwind CSSとAutoprefixer（ベンダープレフィックスを自動でつける）をPostCSSのプラグインとしてインストールする」という意味になると思います。

次に、以下のコマンドでTailwind CSSを初期化します。

npx tailwindcss init -p

initコマンドによってtailwind.config.jsが作成されます。「-p」というオプションをつけた場合、postcss.config.jsが同時に作成されます。

postcss.config.jsを見ると、先ほどインストールしたTailwind CSSとAutoprefixerがプラグインとして記述されています。

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

tailwind.config.jsのpurgeオプションを指定すると、そこで指定したファイルのみがビルドの対象になり、未使用のクラスは削除されて軽量になります。

module.exports = {
	purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
	// 省略
};

アスタリスク二つ（**）は任意のフォルダ階層を意味します。アスタリスク一つ（*）は任意のファイル名を意味します。つまり、上記のサンプルの場合は、pagesとcomponentsフォルダの配下にある全てのjs、ts、jsx、tsxファイルがビルドの対象になります。

purgeオプションは配列なので、複数のパスを指定することも可能です。

最後に、全てのページで読み込まれるベースのテンプレートファイルなどで、Tailwind CSSをインポートします。

import "tailwindcss/tailwind.css";

これでTailwind CSSの準備ができました。実際にTailwind CSSのクラスを付与してみて、npm startで反映されているか確認してください。

npm run build
npm start

Create React Appの場合

ここからは、Create React AppにTailwind CSSをインストールする方法です。Create Next Appと説明が重複している部分は省略しています。

最新のTailwind CSSは、PostCSSのバージョン8で動きます。しかし、Create React Appは、記載時点でバージョン8をサポートしていません。

そのため、PostCSSのバージョン7をインストールして、「postcss7-compat」というTailwind CSSの互換用ツールをインストールします。

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

次に、CRACOをインストールします。CRACOは「Create React App Configuration Override」の略称で、Create React Appの場合はCRACOを使ってPostCSSの設定を拡張する必要があります。

npm install @craco/craco

インストールしたら、package.jsonのscriptsを以下のように修正します。

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
},

プロジェクトのルートに「craco.config.js」というファイルを作り、PostCSSのプラグインを記述します。

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

以下のコマンドでTailwind CSSを初期化します。先ほど作成した「craco.config.js」が「postcss.config.js」の代わりになるため、Create Next Appの場合と違って「-p」オプションは不要です。

npx tailwindcss init

initコマンドによってtailwind.config.jsが作成されるので、purgeオプションにTailwind CSSを使用するファイルのパスを定義します。

module.exports = {
	purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
	// 省略
};

最後に、ベースとなるテンプレートファイルなどでTailwind CSSをインポートします。

import "tailwindcss/tailwind.css";

これでTailwind CSSの準備ができました。実際にTailwind CSSのクラスを付与してみて、npm startで反映されているか確認してください。

npm start

便利なツール

チートシート

Tailwind CSSのクラスを探すときは、以下のようなチートシートが便利です。

https://nerdcave.com/tailwind-cheat-sheet

Tailwind CSS IntelliSense

Visual Studio Codeを使っている場合には、「Tailwind CSS IntelliSense」の拡張機能をインストールすると、クラス名のインテリセンスが有効になります。