Tailwind CSS を使いこなそう（後編）

前編では、tailwind.config.js を使って、色、フォント、スペースを調整したり、独自のユーティリティクラスを追加したりする方法を学びました。後編では、プラグインを活用して Tailwind CSS を拡張する方法、@apply ディレクティブを使ってユーティリティクラスをまとめる方法、そしてダークモード対応の実現方法について解説します。

4. プラグインで機能を拡張！

Tailwind CSS は、プラグイン を使って機能を拡張することができます。公式プラグインやコミュニティ製のプラグインを利用することで、デフォルトでは提供されていない機能を追加したり、既存の機能をカスタマイズしたりすることができます。

公式プラグインの例

@tailwindcss/typography: 文章コンテンツを美しく表示するためのユーティリティクラスを追加
@tailwindcss/forms: フォーム要素のスタイルを簡単にカスタマイズ
@tailwindcss/aspect-ratio: 要素のアスペクト比を維持
@tailwindcss/line-clamp: テキストを指定した行数で切り捨てる

プラグインの使い方

プラグインを使うには、まず npm でインストールします。例えば、@tailwindcss/typography プラグインをインストールする場合は、以下のコマンドを実行します。

bash

npm install -D @tailwindcss/typography

次に、tailwind.config.js の plugins 配列にプラグインを追加します。

javascript

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

これで、プラグインが提供するユーティリティクラスを使えるようになります。

例えば、@tailwindcss/typography プラグインをインストールすると、prose クラスを使えるようになります。このクラスを適用すると、文章コンテンツが美しく表示されます。

html

<article class="prose">
  <h1>Tailwind CSS の魅力</h1>
  <p>Tailwind CSS は、ユーティリティファーストの...</p>
  <h2>ユーティリティファーストとは？</h2>
  <p>ユーティリティファーストとは、小さな部品となるクラスを...</p>
</article>

5. `@apply` でユーティリティクラスをまとめよう

Tailwind CSS を使っていると、HTML のタグにたくさんのユーティリティクラスを記述することになります。これは、Tailwind CSS の特徴の一つですが、場合によってはコードが冗長に見えてしまうこともあります。

そのような場合は、@apply ディレクティブ を使って、複数のユーティリティクラスを一つのクラスにまとめることができます。

@apply ディレクティブは、CSS ファイルの中で使います。例えば、以下のように btn クラスを定義してみましょう。

css

/* src/input.css */
@tailwind base;
@tailwind components;

.btn {
  @apply px-4 py-2 rounded-md font-bold;
}

@tailwind utilities;

ここでは、.btn クラスに、px-4、py-2、rounded-md、font-bold のユーティリティクラスを適用しています。

これで、HTML では以下のように .btn クラスを使うことができます。

html

<button class="btn bg-blue-500 hover:bg-blue-700 text-white">ボタン</button>

bg-blue-500、hover:bg-blue-700、text-white は、.btn クラスとは別に適用しています。

このように、@apply ディレクティブを使えば、よく使うユーティリティクラスの組み合わせを一つのクラスにまとめることができ、HTML をすっきりと保つことができます。

ただし、@apply の使いすぎには注意が必要です。@apply を多用すると、Tailwind CSS のメリットである「ユーティリティファースト」の恩恵を受けにくくなってしまいます。コンポーネントとして再利用するような場合に限定して @apply を使うようにしましょう。

6. ダークモード対応もバッチリ！

Tailwind CSS では、ダークモード にも簡単に対応することができます。

ダークモード対応するには、tailwind.config.js で darkMode オプションを media または class に設定します。

javascript

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'media', // または 'class'
  // ...
}

media を指定した場合

ユーザーのシステム設定（OS の設定）に基づいて、自動的にダークモードが適用されます。

class を指定した場合

HTML の <html> タグに dark クラスが追加されている場合に、ダークモードが適用されます。手動でダークモードを切り替えたい場合に便利です。

ダークモード用のスタイルを指定するには、dark: プレフィックスを使います。

例えば、以下のように記述すると、通常時は背景色が白、ダークモード時は背景色が gray-800 になります。

html

<div class="bg-white dark:bg-gray-800">
  <!-- コンテンツ -->
</div>

先ほどの index.html の自己紹介セクションに、ダークモード対応のスタイルを追加してみましょう。

html

<article class="bg-gray-100 p-6 rounded-lg shadow-md md:w-1/2 lg:w-1/3 dark:bg-gray-800 dark:text-gray-200">
    <h2 class="text-xl font-semibold mb-4">自己紹介</h2>
    <p class="text-gray-700 dark:text-gray-300">こんにちは！私は Tailwind CSS を勉強中の者です。趣味は Web サイト制作です。よろしくお願いします！</p>
    <button class="mt-4 bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 text-white font-bold py-2 px-4 rounded dark:bg-blue-700 dark:hover:bg-blue-900">
        詳しく見る
    </button>
</article>

article タグに dark:bg-gray-800 と dark:text-gray-200、p タグに dark:text-gray-300、button タグに dark:bg-blue-700 dark:hover:bg-blue-900 を追加しました。

darkMode を class に設定した場合は、<html> タグに dark クラスを追加して動作を確認してみてください。

html

<html lang="ja" class="dark">

ダークモードに対応したスタイルが適用されているのが確認できるはずです。