この章では、Tailwind CSS をさらに使いこなし、自分のプロジェクトに最適な形にカスタマイズしていく方法を学びましょう。前編では、設定ファイル tailwind.config.js を編集して、デザインの基盤となる色、フォント、スペースを調整したり、独自のユーティリティクラスを追加したりする方法を解説します。

1. 設定ファイル（tailwind.config.js）をカスタマイズしよう

Tailwind CSS の大きな魅力の一つは、設定ファイル tailwind.config.js を使って、デザインを自由にカスタマイズできる ことです。このファイルを編集することで、デフォルトのユーティリティクラスを変更したり、新しいユーティリティクラスを追加したりすることができます。

まずは、tailwind.config.js の基本的な構造を見てみましょう。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"], // Tailwind CSS を適用するファイルを指定
  theme: {
    extend: {
      // デフォルトのテーマを拡張する場合はここに記述
    },
  },
  plugins: [], // プラグインを使用する場合はここに記述
}

このファイルは、主に content、theme、plugins の 3 つのセクションで構成されています。

• content: Tailwind CSS を適用するファイルを指定します。例えば、"./src/**/*.html" とすれば、src フォルダー内のすべての HTML ファイルが対象になります。
• theme: 色、フォント、スペースなどのデザインの基本設定を記述します。
• plugins: Tailwind CSS の機能を拡張するためのプラグインを指定します。

theme セクションの中には、extend というオブジェクトがあります。ここに追加した設定は、デフォルトのテーマにマージされます。 一方、extend の外に記述した設定は、デフォルトのテーマを上書きします。

2. 色、フォント、スペースを自分のプロジェクトに合わせて調整！

それでは、tailwind.config.js を使って、色、フォント、スペースを自分のプロジェクトに合わせて調整してみましょう。

色のカスタマイズ

デフォルトでは、Tailwind CSS には多くの色が用意されていますが、プロジェクトによっては、独自の色を使いたい場合もあるでしょう。tailwind.config.js の theme.extend.colors に新しい色を追加することで、オリジナルのカラーパレットを定義できます。

例えば、以下のように primary と secondary という名前の色を追加してみましょう。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {
      colors: {
        primary: '#007bff', // プライマリーカラー
        secondary: '#6c757d', // セカンダリーカラー
      },
    },
  },
  plugins: [],
}

これで、bg-primary、text-primary、border-primary などのユーティリティクラスで、#007bff の色を使えるようになります。bg-secondary、text-secondary なども同様です。

フォントのカスタマイズ

同様に、theme.extend.fontFamily でフォントファミリーをカスタマイズすることもできます。

例えば、以下のように sans という名前のフォントファミリーを追加してみましょう。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui', ...], // フォントファミリーを配列で指定
      },
    },
  },
  plugins: [],
}

これで、font-sans というユーティリティクラスで、Inter、ui-sans-serif、system-ui などのフォントを指定できるようになります。

スペースのカスタマイズ

theme.extend.spacing で、マージンやパディングなどのスペースに関する設定をカスタマイズすることもできます。

例えば、以下のように 80 という名前のスペースを追加してみましょう。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {
      spacing: {
        '80': '20rem', // 1rem = 16px なので、20rem は 320px に相当
      },
    },
  },
  plugins: [],
}

これで、m-80、p-80、w-80、h-80 などのユーティリティクラスで、20rem のスペースを指定できるようになります。

これらの設定を変更したら、ターミナルで npm run build を実行して、CSS を再生成するのを忘れないでください。

3. 独自のユーティリティクラスを追加してみよう

tailwind.config.js では、既存のユーティリティクラスをカスタマイズするだけでなく、独自のユーティリティクラスを追加する こともできます。

例えば、text-gradient という、テキストにグラデーションを適用するユーティリティクラスを追加してみましょう。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {
      colors: {
        primary: '#007bff',
        secondary: '#6c757d',
      },
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui', ...],
      },
      spacing: {
        '80': '20rem',
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      const newUtilities = {
        '.text-gradient': {
          background: 'linear-gradient(to right, #007bff, #6c757d)',
          '-webkit-background-clip': 'text',
          '-webkit-text-fill-color': 'transparent',
        },
      }
      addUtilities(newUtilities)
    }
  ],
}

ここでは、plugins セクションに、addUtilities 関数を使って新しいユーティリティクラスを追加しています。

text-gradient クラスは、以下のような CSS を生成します。

.text-gradient {
  background: linear-gradient(to right, #007bff, #6c757d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

これで、index.html で text-gradient クラスを使ってみましょう。

<h1 class="text-3xl font-bold underline mb-8 text-gradient">Tailwind CSS の練習</h1>

h1 タグに text-gradient クラスを追加しました。

ブラウザで index.html を表示すると、h1 タグのテキストにグラデーションが適用されているのが確認できるはずです。

このように、tailwind.config.js を使えば、自分のプロジェクトに必要なユーティリティクラスを自由に追加することができます。