Tailwind CSS をさらに効率的に使うために（前編）

この章では、Tailwind CSS をさらに効率的に使うためのツールや機能を紹介します。これらのツールや機能を活用することで、開発速度を向上させ、パフォーマンスを最適化し、より快適に Tailwind CSS を使いこなすことができるようになります。

1. VS Code 拡張機能でコーディングを快適に！

Tailwind CSS での開発を効率化するためには、Visual Studio Code (VS Code) の拡張機能を活用するのがおすすめです。特に、以下の 2 つの拡張機能は非常に便利です。

1. Tailwind CSS IntelliSense

Tailwind CSS IntelliSense は、Tailwind CSS の公式 VS Code 拡張機能です。この拡張機能をインストールすると、以下のような機能が利用できるようになります。

クラス名のオートコンプリート: ユーティリティクラスの名前を途中まで入力すると、候補が表示されます。
ホバープレビュー: HTML 上のユーティリティクラスにマウスカーソルを合わせると、適用される CSS の内容がプレビュー表示されます。
構文チェック: 間違ったクラス名を入力すると、エラーが表示されます。
@apply ディレクティブのサポート: @apply でまとめたクラス名もオートコンプリートやホバープレビューが機能します。

これらの機能により、クラス名を正確かつ迅速に入力できるようになり、コーディングの効率が大幅に向上します。

インストール方法

VS Code のアクティビティバー（左端のアイコンが並んでいる部分）から、「拡張機能」アイコンをクリックします。
検索ボックスに「Tailwind CSS IntelliSense」と入力します。
「Tailwind CSS IntelliSense」（bradlc.vscode-tailwindcss）を選択し、「インストール」ボタンをクリックします。

2. Prettier - Code formatter

Prettier は、コードを自動的に整形してくれるフォーマッターです。Tailwind CSS とも相性が良く、HTML や CSS、JavaScript などのコードを、一貫したスタイルで整形してくれます。

インストール方法

VS Code のアクティビティバーから、「拡張機能」アイコンをクリックします。
検索ボックスに「Prettier - Code formatter」と入力します。
「Prettier - Code formatter」（esbenp.prettier-vscode）を選択し、「インストール」ボタンをクリックします。

設定方法

Tailwind CSS で Prettier を使う場合は、prettier-plugin-tailwindcss という Prettier のプラグインをインストールすることをおすすめします。このプラグインをインストールすることで、Tailwind CSS のクラス名の並び順も自動的に整形してくれます。

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

bash

npm install -D prettier prettier-plugin-tailwindcss

.prettierrc または package.json 内の prettier の設定で、プラグインを追加します。

json

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

これらの拡張機能を活用することで、Tailwind CSS のコーディングがより快適になります。

2. PurgeCSS で未使用のスタイルを削除して軽量化

Tailwind CSS は、デフォルトでは非常に多くのユーティリティクラスを生成します。しかし、実際に Web サイトで使用するクラスは、その一部に過ぎません。PurgeCSS は、未使用の CSS を検出し、削除してくれるツールです。PurgeCSS を使うことで、最終的な CSS ファイルのサイズを大幅に削減し、Web サイトのパフォーマンスを向上させることができます。

PurgeCSS の使い方

PurgeCSS は、Tailwind CSS と組み合わせて使うことができます。設定方法はいくつかありますが、ここでは postcss.config.js で設定する方法を紹介します。

ターミナルで以下のコマンドを実行して、PurgeCSS をインストールします。

bash

npm install -D @fullhuman/postcss-purgecss

プロジェクトのルートディレクトリに postcss.config.js というファイルを作成し、以下のように記述します。

javascript

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./**/*.html'], // 対象となるファイルを指定
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
  whitelistPatterns: [/^bg-/, /^text-/], // 特定のパターンにマッチするクラスを保持
});

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production' ? [purgecss] : [] // 本番環境でのみ PurgeCSS を実行
  ]
};

この設定では、content オプションで使用されている HTML ファイルを指定し、defaultExtractor オプションで、それらのファイルから使用されているクラス名を抽出する方法を指定しています。また、whitelistPatterns オプションで特定のパターンにマッチするクラスを保持するように指定できます。この例では、bg- または text- で始まるクラスが保持されます。そして、process.env.NODE_ENV === 'production' という条件分岐を使って、本番環境でのみ PurgeCSS を実行するようにしています。

package.json の scripts を以下のように変更します。

json

"scripts": {
  "build": "NODE_ENV=production tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
},

NODE_ENV=production を追加することで、本番環境用のビルドになります。 --minify オプションをつけることで、生成される CSS を最小化します。

これで、npm run build を実行すると、未使用の CSS が削除された、軽量な CSS ファイルが生成されるようになります。

3. JIT(Just-In-Time) モードで爆速ビルド！

Tailwind CSS には、JIT (Just-In-Time) モード という、ビルド時間を大幅に短縮してくれる機能があります。従来の Tailwind CSS では、すべてのユーティリティクラスを事前に生成していたため、開発中に CSS ファイルが巨大になり、ビルド時間も長くなっていました。JIT モードでは、HTML や JavaScript ファイルで使用されているユーティリティクラスのみをオンデマンドで生成するため、ビルド時間が大幅に短縮されます。

JIT モードの使い方

JIT モードを有効にするには、tailwind.config.js で mode オプションを jit に設定します。

javascript

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: ["./*.html"],
  // ...
}

これだけで、JIT モードが有効になり、ビルド時間が大幅に短縮されます。

JIT モードでは、他にも以下のようなメリットがあります。

すべてのユーティリティクラスでバリアントが使える: 例えば、hover:bg-red-500/50 のように、透過度を指定した色のホバー効果を簡単に適用できます。
任意の値が使える: 例えば、w-[33%] のように、パーセンテージやピクセル値を直接指定できます。
パフォーマンスの向上: 生成される CSS ファイルのサイズが小さくなり、ブラウザでの読み込み速度が向上します。

JIT モードは、Tailwind CSS の開発を大幅に効率化してくれる強力な機能です。ぜひ活用してみてください。