ブログ

Tailwind CSSでモダンなUIを作る方法

Tailwind CSSでモダンなUIを作る

Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。

基本的な使い方

レスポンシブデザイン

<div class="w-full md:w-1/2 lg:w-1/3">
  <p class="text-sm md:text-base lg:text-lg">
    レスポンシブなテキスト
  </p>
</div>

カラーパレット

  • bg-blue-500 - 青色の背景
  • text-gray-700 - グレーのテキスト
  • border-green-300 - 緑色のボーダー

コンポーネントの作成

カードコンポーネント

<div class="bg-white rounded-lg shadow-md p-6">
  <h2 class="text-xl font-bold mb-4">カードタイトル</h2>
  <p class="text-gray-600">カードの内容...</p>
</div>

ボタンコンポーネント

<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
  クリック
</button>

パフォーマンス最適化

  1. PurgeCSSを使用して未使用のCSSを削除
  2. JIT modeでビルド時間を短縮
  3. Component extractionで再利用性を向上

Tailwind CSSを使うことで、効率的かつ美しいUIを構築できます。

記事一覧に戻る