Tailwind CSSの実践テクニック集

#レスポンシブデザイン

Tailwind CSS はモバイルファーストのアプローチを採用しています。 md: や lg: といった修飾子で画面幅に応じたスタイルを適用します。

<!-- モバイルでは1列、md以上で2列、lg以上で3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="rounded-lg bg-white p-4 shadow">カード1</div>
  <div class="rounded-lg bg-white p-4 shadow">カード2</div>
  <div class="rounded-lg bg-white p-4 shadow">カード3</div>
</div>

#ダークモード対応

dark: 修飾子を使えば、ダークモード時のスタイルを簡単に記述できます。

/* Tailwind のユーティリティクラスを CSS で使う例 */
.custom-card {
  @apply rounded-xl bg-white p-6 shadow-md
         dark:bg-gray-800 dark:shadow-gray-900/20;
}

#まとめ

Tailwind CSS のユーティリティクラスを使いこなして、効率的にスタイリングしましょう。