TailwindCSSのTips

TailwindCSSを効果的に使うためのTipsをいくつか紹介します。

1. カスタムカラーの追加

tailwind.config.jsでカスタムカラーを定義できます：

theme: {
  extend: {
    colors: {
      'custom-blue': '#3b82f6',
    },
  },
}

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

TailwindCSSのブレークポイントを使って簡単にレスポンシブデザインを実装：

<div class="text-sm md:text-base lg:text-lg">
  レスポンシブテキスト
</div>

3. ダークモード

dark:プレフィックスを使ってダークモードのスタイルを定義：

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

まとめ

TailwindCSSは強力で柔軟なユーティリティファーストCSSフレームワークです。