Tailwind CSS のカスタマイズ – フレームワークの拡張

この記事では、プロジェクトのニーズに合わせて Tailwind CSS をカスタマイズするについて詳しく説明します。 Tailwind は柔軟性があり、デフォルト構成を超えて拡張できるため、完全にカスタマイズされた設計システムを作成できます。

---

1. Tailwind をカスタマイズする理由

デフォルトでは、Tailwind は幅広いユーティリティ クラスを提供しますが、利用可能なものを超えたものを使用したい場合もあります。独自の色、フォント、間隔値、さらにはブレークポイントを追加できるため、Tailwind はデザイン システムに最適です。

例:

プロジェクトでブランド固有の色やカスタム フォントを使用したい場合があります。 Tailwind では、構成ファイル (tailwind.config.js) でこれらの設定を簡単に構成できます。

---

2. Tailwind 構成ファイルのセットアップ

npm 経由で Tailwind をインストールしたら、次のコマンドを実行して構成ファイルを作成できます。

npx tailwindcss init

これにより、Tailwind のデフォルト設定をカスタマイズできる tailwind.config.js ファイルが生成されます。

例:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#5A67D8',
      },
      fontFamily: {
        custom: ['Open Sans', 'sans-serif'],
      },
    },
  },
}

この例では:

• カスタム カラー (ブランド) とカスタム フォント ファミリー (カスタム) を追加しました。

---

3.カスタムの色と間隔を追加する

Tailwind を使用すると、プロジェクトのデザイン ニーズに合わせてカスタムの色と間隔の値を定義できます。デフォルトのパレットを拡張することも、完全に置き換えることもできます。

例 – カスタムカラー:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1E40AF',
        secondary: '#A78BFA',
      },
    },
  },
}

これで、HTML でこれらの色を使用できるようになります:

<div class="bg-primary text-white">Custom Background</div>

例 – カスタム間隔:

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
}

これらの新しい間隔値は次のように使用できるようになりました:

<div class="mt-72">Extra Margin</div>

---

4.ブレークポイントのカスタマイズ

デフォルトのレスポンシブ ブレークポイントが設計要件に適合しない場合は、新しいブレークポイントを変更または追加できます。

例:

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px', // Adding a custom breakpoint
    },
  },
}

これで、新しい 3xl ブレークポイントでスタイルを適用できるようになりました。

---

5.未使用の CSS を削除

Tailwind は大量の CSS を生成できますが、未使用のスタイルを削除することで、運用 CSS のサイズを大幅に削減できます。 Tailwind には、最終的な CSS ファイルから未使用のクラスを削除する組み込みのパージ オプションがあります。

パージのセットアップ:

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.js'],
}

これにより、HTML および JavaScript ファイルで使用されている CSS クラスのみが本番ビルドに含まれるようになり、最終的な CSS ファイルが大幅に小さくなります。

---

結論

Tailwind CSS をカスタマイズすると、プロジェクトの正確なニーズに合わせてフレームワークを調整できます。カスタムの色、フォント、間隔、さらにはブレークポイントを追加する場合でも、Tailwind を使用すると、ユーティリティ ファースト クラスの力を活用しながら、独自のデザイン システムを作成する柔軟性が得られます。

---

LinkedIn でフォローしてください

リドイ・ハサン

私のウェブサイトにアクセスしてください

以上がTailwind CSS のカスタマイズ – フレームワークの拡張の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。