tailwindcss

Tailwind CSS v4 開発ガイドライン

Tailwind CSS v4 のユーティリティクラスを効果的に使用するためのベストプラクティスです。

注：Tailwind CSS v4（2025 年 1 月リリース）では、CSS ファーストの設定方式が採用されています。v3 との互換性が必要な場合は、引き続き tailwind.config.js を使用できます。

基本原則

1. ユーティリティファースト：カスタム CSS ではなく、ユーティリティクラスを使用します
2. モバイルファースト：まずモバイル向けにデザインし、レスポンシブ修飾子で拡張します
3. コンポーネントの抽出：繰り返し使うパターンをコンポーネントに抽出します
4. 一貫した間隔：Tailwind の間隔スケールを使用します
5. カスタム設定：ブランドの一貫性を保つため、デフォルトのテーマを拡張します

基本ユーティリティ

レイアウト

// Flexbox
<div className="flex items-center justify-between gap-4">
  <div className="flex-1">Content</div>
  <div className="flex-shrink-0">Sidebar</div>
</div>

// Grid
<div className="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

// Positioning
<div className="relative">
  <div className="absolute top-0 right-0">Badge</div>
</div>

間隔

// Padding and Margin
<div className="p-4 m-2">           {/* padding: 1rem, margin: 0.5rem */}
<div className="px-6 py-4">        {/* padding-x: 1.5rem, padding-y: 1rem */}
<div className="mt-8 mb-4">        {/* margin-top: 2rem, margin-bottom: 1rem */}

// Space between children
<div className="space-y-4">        {/* margin-bottom on all but last child */}
  <div>Item 1</div>
  <div>Item 2</div>
</div>

タイポグラフィ

<h1 className="text-4xl font-bold text-gray-900">Heading</h1>
<p className="text-base font-normal text-gray-600 leading-relaxed">
  Paragraph text with comfortable line height.
</p>
<span className="text-sm font-medium text-blue-600">Label</span>

色

// Text colors
<p className="text-gray-900 dark:text-gray-100">Text</p>

// Background colors
<div className="bg-blue-500 hover:bg-blue-600">Button</div>

// Border colors
<div className="border border-gray-300">Box</div>

レスポンシブデザイン

ブレークポイント

// Mobile-first responsive classes
<div className="w-full md:w-1/2 lg:w-1/3">
  {/* Full width on mobile, half on medium screens, third on large */}
</div>

<h1 className="text-2xl md:text-4xl lg:text-6xl">
  {/* Responsive text sizes */}
</h1>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  {/* Responsive grid */}
</div>

コンテナ

<div className="container mx-auto px-4">
  {/* Centered container with horizontal padding */}
</div>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {/* Responsive container padding */}
</div>

コンポーネントのパターン

ボタン

<button className="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
  Click me
</button>

// Variants
<button className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
  Secondary
</button>

カード

<div className="overflow-hidden rounded-lg bg-white shadow-md">
    <img src="/image.jpg" alt="" className="h-48 w-full object-cover" />
    <div className="p-6">
        <h2 className="mb-2 text-xl font-semibold">Card Title</h2>
        <p className="text-gray-600">Card content goes here.</p>
    </div>
</div>

フォーム入力

<div className="space-y-2">
    <label htmlFor="email" className="block text-sm font-medium text-gray-700">
        Email
    </label>
    <input
        type="email"
        id="email"
        className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none"
        placeholder="[email protected]"
    />
    <p className="text-sm text-gray-500">We'll never share your email.</p>
</div>

状態バリアント

ホバー、フォーカス、アクティブ

<button className="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus:ring-2 focus:ring-blue-500">
  Interactive Button
</button>

<a href="#" className="text-blue-600 hover:text-blue-800 hover:underline">
  Link
</a>

グループホバー

<div className="group">
    <img src="/image.jpg" className="transition-opacity group-hover:opacity-75" />
    <p className="group-hover:text-blue-600">Hover the container</p>
</div>

無効状態

<button className="disabled:cursor-not-allowed disabled:opacity-50" disabled>
    Disabled Button
</button>

ダークモード

/* Tailwind v4: Configure in app/globals.css */
@import "tailwindcss";

@media (prefers-color-scheme: dark) {
    /* Or use class-based: .dark */
}

// Usage (same as v3)
<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
    <h1 className="text-gray-900 dark:text-white">Title</h1>
    <p className="text-gray-600 dark:text-gray-400">Description</p>
</div>

カスタムスタイル

任意の値

<div className="top-[117px]">           {/* Custom top value */}
<div className="bg-[#1da1f2]">          {/* Custom color */}
<div className="grid-cols-[200px_1fr]"> {/* Custom grid template */}

@apply ディレクティブ

/* components/button.css */
.btn-primary {
    @apply rounded-md bg-blue-600 px-4 py-2 font-medium text-white;
    @apply hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none;
    @apply disabled:cursor-not-allowed disabled:opacity-50;
}

設定

Tailwind v4：CSS ファーストの設定

/* app/globals.css */
@import "tailwindcss";

@theme {
    /* Custom colors */
    --color-brand-50: #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-900: #1e3a8a;

    /* Custom spacing */
    --spacing-128: 32rem;

    /* Custom fonts */
    --font-family-sans: "Inter", sans-serif;

    /* Custom breakpoints */
    --breakpoint-3xl: 1920px;
}

Tailwind v3 の設定（引き続きサポート）

// tailwind.config.js (optional in v4)
module.exports = {
    content: ["./app/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}"],
    theme: {
        extend: {
            colors: {
                brand: {
                    50: "#eff6ff",
                    100: "#dbeafe",
                    900: "#1e3a8a"
                }
            },
            spacing: {
                128: "32rem"
            },
            fontFamily: {
                sans: ["Inter", "sans-serif"]
            }
        }
    },
    plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")]
}

プラグイン

公式プラグイン

npm install @tailwindcss/forms
npm install @tailwindcss/typography
npm install @tailwindcss/aspect-ratio
npm install @tailwindcss/container-queries

// @tailwindcss/forms
<input type="text" className="form-input rounded-md" />

// @tailwindcss/typography
<article className="prose lg:prose-xl">
  <h1>Article Title</h1>
  <p>Content...</p>
</article>

パフォーマンス

コンテンツの自動検出

Tailwind v4 はすべてのテンプレートファイルを自動的に検出してスキャンするため、content の設定は不要です。

ビルドパフォーマンス

Tailwind v4 は、@property や color-mix() などの最新の CSS 機能を使用することで、v3 と比較してフルビルドを 3.5 倍高速化（約 100ms）します。

ブラウザー要件：Safari 16.4+、Chrome 111+、Firefox 128+

よく使われるパターン

コンテンツの中央揃え

<div className="flex min-h-screen items-center justify-center">
    <div>Centered content</div>
</div>

固定ヘッダー

<header className="sticky top-0 z-50 border-b bg-white">
    <nav>Navigation</nav>
</header>

グリッドレイアウト

<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
    {posts.map((post) => (
        <PostCard key={post.id} post={post} />
    ))}
</div>

テキストの省略

<p className="truncate">This text will be truncated with ellipsis if too long</p>
<p className="line-clamp-3">This text will show max 3 lines with ellipsis</p>

ベストプラクティス

1. 間隔を一貫させる：Tailwind の間隔スケールを使用します
2. デフォルトでレスポンシブにする：常にモバイルファーストのデザインを考慮します
3. コンポーネントを抽出する：長いクラスリストの繰り返しを避けます
4. テーマカラーを使用する：任意の値ではなく、設定でカスタムカラーを定義します
5. @apply の使用は控えめにする：JSX ではユーティリティクラスを優先します
6. ダークモードを有効にする：最初からダークモードを考慮します
7. プラグインを使用する：よくあるニーズには公式プラグインを活用します
8. 本番環境向けに最適化する：パージが正しく設定されていることを確認します