Tailwind CSS の実践的なヒントとベスト プラクティス

カスタム デザイン トークン

tailwind.config.mjs でプロジェクト固有のデザイン トークンを定義します。

theme: {
  extend: {
    colors: {
      primary: { /* 色阶 */ },
      surface: { /* 色阶 */ },
    },
  },
},

一般的に使用されるテクニック

1. @apply を使用してパブリック スタイルを抽出する

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary-500 text-white rounded-lg
           hover:bg-primary-600 transition-colors duration-200;
  }
}

2. レスポンシブデザイン

Tailwind のブレークポイントはモバイルファーストです。

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px

3. ダークモード

ダーク モードを簡単に実装するには、「dark:」接頭辞を使用します。

<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-white">自适应内容</p>
</div>

パフォーマンスの最適化

• 未使用の CSS が生成されないように、「content」が正しく設定されていることを確認してください。
• JIT モードを使用してオンデマンドでスタイルを生成
• ビルド中の自動ツリーシェイク

要約する

Tailwind CSS により、スタイル開発がより効率的になります。カスタム構成とツール クラスを合理的に使用することで、一貫性のある美しいインターフェイスを迅速に構築できます。