Tailwind CSSでモダンなデザイン

Tailwind CSSを使って効率的にスタイリングする方法を紹介します。

ユーティリティファーストのメリット

• クラス名を考える時間の削減
• 一貫したデザインシステム
• カスタマイズの柔軟性

よく使うユーティリティ

<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
  <h2 class="text-xl font-bold text-gray-900 dark:text-white">カード見出し</h2>
  <button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600">
    詳細
  </button>
</div>

レスポンシブデザイン

Tailwind CSSでは、簡単にレスポンシブデザインを実装できます。

• sm: - 640px以上
• md: - 768px以上
• lg: - 1024px以上
• xl: - 1280px以上

例: class="text-sm md:text-base lg:text-lg"