tailwind-css

Tailwind CSS - ユーティリティファーストフレームワーク

カスタムユーザーインターフェースをすばやく構築するためのユーティリティファーストな CSS フレームワーク、Tailwind CSS を習得するための包括的なスキルです。基本概念、レスポンシブデザインのパターン、コンポーネントの抽出、ダークモードの実装、テーマのカスタマイズ、本番環境向けの最適化について説明します。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• ユーティリティファーストな CSS アプローチで最新のウェブアプリケーションを構築する
• あらゆるデバイスサイズで適切に表示されるレスポンシブデザインを作成する
• アプリケーションにダークモードやテーマ切り替え機能を実装する
• 一貫したスタイルの再利用可能なコンポーネントライブラリを開発する
• 本番環境へのデプロイに向けて CSS のパフォーマンスを最適化する
• ブランド固有のトークンを使用してデザインシステムをカスタマイズする
• アクセシブルでモバイルファーストなユーザーインターフェースを構築する
• React、Vue、Svelte、Next.js などのフレームワークと連携する
• UI デザインのプロトタイプを作成し、すばやく反復する
• 大規模なコードベース全体でデザインの一貫性を維持する

基本概念

ユーティリティファーストの考え方

Tailwind CSS は、従来の CSS フレームワークとは異なるアプローチを採用しています。

• コンポーネントではなくユーティリティクラス：あらかじめ用意されたコンポーネントの代わりに、単一の目的を持つユーティリティクラスを使用します
• HTML 内で組み合わせる：マークアップ内でユーティリティを直接組み合わせて、複雑なデザインを構築します
• コンテキストを切り替えない：CSS ファイルに移動せず、HTML/JSX 内で作業を続けられます
• デザインシステムを標準搭載：一貫した余白、色、タイポグラフィをすぐに利用できます
• 標準でレスポンシブ対応：すべてのユーティリティにレスポンシブ用のバリアントが組み込まれています
• JIT コンパイル：Just-in-Time モードにより、実際に使用する CSS のみが生成されます

主な原則

1. 単一責任：各クラスは、1 つのことを適切に行います
2. 組み合わせ可能性：ユーティリティを組み合わせて、複雑なデザインを作成します
3. 制約：デザインシステムの制約により、より優れた、一貫性のある UI を実現できます
4. 柔軟性：必要に応じて、一度限りのカスタマイズに任意の値を使用できます
5. パフォーマンス：インテリジェントな削除処理によって、CSS の出力を最小限に抑えます

基本ユーティリティのリファレンス

レイアウトユーティリティ

表示

<div class="block">Block element</div>
<span class="inline">Inline element</span>
<div class="inline-block">Inline-block</div>


<div class="flex items-center justify-between">
  <div>Left</div>
  <div>Right</div>
</div>


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


<div class="hidden md:block">Visible on medium screens and up</div>

配置

<div class="relative">
  <div class="absolute top-0 right-0">Top-right corner</div>
</div>

<div class="fixed bottom-4 right-4">Fixed bottom-right</div>
<div class="sticky top-0">Sticky header</div>

サイズ

<div class="w-full h-screen">Full width, viewport height</div>
<div class="w-1/2 h-64">Half width, 16rem height</div>
<div class="w-[750px] h-[500px]">Arbitrary values</div>


<div class="min-w-0 max-w-md">Constrained width</div>
<div class="min-h-screen max-h-full">Constrained height</div>

余白ユーティリティ

パディングとマージン

<div class="p-4 m-2">Padding 1rem, margin 0.5rem</div>


<div class="pt-8 pb-4 pl-6 pr-2">Individual padding</div>
<div class="mt-4 mb-8 ml-auto mr-auto">Individual margin</div>


<div class="px-4 py-2">Horizontal and vertical</div>
<div class="ps-4 pe-2">Inline start/end (RTL-aware)</div>


<div class="-mt-4 -ml-2">Negative margins for overlap</div>


<div class="flex space-x-4">Horizontal spacing between children</div>
<div class="flex flex-col space-y-2">Vertical spacing between children</div>

タイポグラフィユーティリティ

フォントファミリー、サイズ、太さ

<p class="font-sans">Sans-serif font</p>
<p class="font-serif">Serif font</p>
<p class="font-mono">Monospace font</p>


<p class="text-xs">Extra small (0.75rem)</p>
<p class="text-sm">Small (0.875rem)</p>
<p class="text-base">Base (1rem)</p>
<p class="text-lg">Large (1.125rem)</p>
<p class="text-xl">Extra large (1.25rem)</p>
<h1 class="text-4xl">4XL heading (2.25rem)</h1>


<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>

テキストのスタイル

<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>


<p class="text-gray-900">Dark gray text</p>
<p class="text-blue-600">Blue text</p>
<p class="text-red-500/75">Red text with 75% opacity</p>


<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>
<a class="no-underline hover:underline">Hover underline</a>


<p class="uppercase">UPPERCASE TEXT</p>
<p class="lowercase">lowercase text</p>
<p class="capitalize">Capitalize Each Word</p>


<p class="leading-tight">Tight line height</p>
<p class="leading-relaxed">Relaxed line height</p>
<p class="tracking-wide">Wide letter spacing</p>

色のユーティリティ

背景色

<div class="bg-white">White background</div>
<div class="bg-gray-100">Light gray background</div>
<div class="bg-blue-500">Blue background</div>
<div class="bg-red-600/50">Red background at 50% opacity</div>


<div class="bg-gradient-to-r from-purple-500 to-pink-500">
  Purple to pink gradient
</div>
<div class="bg-gradient-to-br from-blue-400 via-purple-500 to-pink-600">
  Three-color gradient
</div>

テキストとボーダーの色

<p class="text-gray-900 dark:text-white">Adaptive text color</p>
<p class="text-blue-600 hover:text-blue-800">Interactive text color</p>


<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Thick blue border</div>
<div class="divide-y divide-gray-200">Divided children</div>

ボーダーと角丸のユーティリティ

<div class="border">1px border</div>
<div class="border-2">2px border</div>
<div class="border-t-4">4px top border only</div>


<div class="rounded">0.25rem radius</div>
<div class="rounded-lg">0.5rem radius</div>
<div class="rounded-full">Full circle/pill</div>
<div class="rounded-t-lg">Round top only</div>


<div class="border-solid">Solid border</div>
<div class="border-dashed">Dashed border</div>
<div class="border-dotted">Dotted border</div>

シャドウとエフェクト

<div class="shadow-sm">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-none hover:shadow-lg">Interactive shadow</div>


<h1 class="text-shadow-lg">Large text shadow</h1>
<p class="text-shadow-sm text-shadow-gray-300">Colored text shadow</p>


<div class="opacity-50">50% opacity</div>
<div class="opacity-0 hover:opacity-100">Fade in on hover</div>

レスポンシブデザイン

ブレークポイントシステム

Tailwind はモバイルファーストのブレークポイントシステムを採用しています。

/* Breakpoint reference */
sm: 640px   /* @media (min-width: 640px) */
md: 768px   /* @media (min-width: 768px) */
lg: 1024px  /* @media (min-width: 1024px) */
xl: 1280px  /* @media (min-width: 1280px) */
2xl: 1536px /* @media (min-width: 1536px) */

レスポンシブユーティリティ

<div class="w-full md:w-1/2 lg:w-1/3">
  Full width on mobile, half on tablet, third on desktop
</div>


<div class="flex flex-col md:flex-row gap-4">
  Vertical on mobile, horizontal on tablet+
</div>


<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  1 column mobile, 2 tablet, 4 desktop
</div>


<h1 class="text-2xl md:text-4xl lg:text-6xl">
  Scales with screen size
</h1>


<div class="block md:hidden">Mobile only</div>
<div class="hidden md:block">Desktop only</div>
<div class="hidden md:block lg:hidden">Tablet only</div>

カスタムブレークポイント

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

@theme {
  --breakpoint-xs: 30rem;    /* 480px */
  --breakpoint-3xl: 120rem;  /* 1920px */
}

<div class="grid xs:grid-cols-2 3xl:grid-cols-6">
  Uses custom xs and 3xl breakpoints
</div>

ブレークポイント範囲の指定

<div class="md:max-xl:flex">
  Flex layout only on tablets
</div>


<div class="flex max-md:hidden">
  Hidden below medium breakpoint
</div>

コンテナクエリ

<div class="@container">
  <div class="@lg:grid-cols-3 grid grid-cols-1">
    Responds to container size, not viewport
  </div>
</div>


<div class="@container">
  <div class="flex flex-col @min-[475px]:flex-row">
    Custom container breakpoint
  </div>
</div>


<div class="@container">
  <div class="w-[50cqw]">
    50% of container width
  </div>
</div>

ダークモードの実装

自動ダークモード（メディアクエリ）

システム設定に基づくデフォルトの動作です。

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h3 class="text-gray-900 dark:text-white font-semibold">
      Card Title
    </h3>
    <p class="text-gray-500 dark:text-gray-400">
      Content automatically adapts to color scheme preference
    </p>
  </div>
</div>

手動ダークモード（クラスベース）

手動で制御できるように、カスタムバリアントを設定します。

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

@custom-variant dark (&:where(.dark, .dark *));

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      Controlled by .dark class on ancestor
    </div>
  </body>
</html>

ダークモードの切り替えロジック

// Dark mode toggle with localStorage persistence
// Add inline in <head> to avoid FOUC (Flash of Unstyled Content)
document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" ||
    (!("theme" in localStorage) &&
     window.matchMedia("(prefers-color-scheme: dark)").matches)
);

// User explicitly chooses light mode
function setLightMode() {
  localStorage.theme = "light";
  document.documentElement.classList.remove("dark");
}

// User explicitly chooses dark mode
function setDarkMode() {
  localStorage.theme = "dark";
  document.documentElement.classList.add("dark");
}

// User chooses to respect OS preference
function setSystemMode() {
  localStorage.removeItem("theme");
  document.documentElement.classList.toggle(
    "dark",
    window.matchMedia("(prefers-color-scheme: dark)").matches
  );
}

データ属性によるダークモード

データ属性を使用する別の方法です。

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

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-black">
      Uses data-theme attribute
    </div>
  </body>
</html>

状態バリアント

インタラクティブな状態

<button class="
  bg-blue-500
  hover:bg-blue-600
  focus:bg-blue-700
  active:bg-blue-800
  focus:outline-2
  focus:outline-offset-2
  focus:outline-blue-500
">
  Interactive button
</button>


<button class="
  bg-blue-500
  disabled:opacity-50
  disabled:cursor-not-allowed
" disabled>
  Disabled button
</button>


<div class="border-2 border-transparent focus-within:border-blue-500">
  <input class="outline-none" placeholder="Focus container changes" />
</div>

フォームの状態

<input class="
  border
  border-gray-300
  focus:border-blue-500
  focus:ring-2
  focus:ring-blue-200
  invalid:border-red-500
  placeholder:text-gray-400
" />


<input type="checkbox" class="
  checked:bg-blue-500
  indeterminate:bg-gray-500
" />


<input type="file" class="
  file:mr-4
  file:rounded-full
  file:border-0
  file:bg-violet-50
  file:px-4
  file:py-2
  file:text-sm
  file:font-semibold
  hover:file:bg-violet-100
" />

擬似クラスと擬似要素

<ul>
  <li class="first:font-bold">First item is bold</li>
  <li class="even:bg-gray-100">Even items have background</li>
  <li class="last:border-b-0">Last item has no border</li>
</ul>


<div class="
  before:content-['→']
  before:mr-2
  after:content-['←']
  after:ml-2
">
  Content with decorations
</div>


<div class="group">
  <img class="group-hover:opacity-75" src="..." />
  <p class="group-hover:text-blue-600">Hover parent to affect children</p>
</div>


<input type="checkbox" class="peer" id="toggle" />
<label class="peer-checked:text-blue-600" for="toggle">
  Changes when checkbox is checked
</label>

メディアクエリのバリアント

<button class="
  transition
  hover:-translate-y-1
  motion-reduce:transition-none
  motion-reduce:hover:translate-y-0
">
  Respects user motion preference
</button>


<label>
  <input class="contrast-more:border-gray-400" />
  <p class="opacity-75 contrast-more:opacity-100">
    Adjusts for contrast needs
  </p>
</label>


<article class="print:hidden">Not shown when printing</article>
<div class="hidden print:block">Only visible in print</div>


<div class="portrait:hidden">Hidden in portrait mode</div>
<div class="landscape:grid-cols-2">Adapts to orientation</div>

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

コンポーネントを抽出するタイミング

次の場合にコンポーネントを抽出します。

1. パターンの繰り返し：同じユーティリティの組み合わせを複数回使用する
2. 意味の明確さ：パターンが特定の UI 要素（ボタン、カードなど）を表す
3. チーム内のコミュニケーション：一貫性のあるコンポーネントを共有する必要がある
4. 保守性：変更をすべてのインスタンスに反映する必要がある

フレームワークのコンポーネント抽出

React コンポーネント

// Button.jsx - Reusable component with variants
export function Button({ size = 'md', variant = 'primary', children, ...props }) {
  const baseStyles = "font-bold rounded transition focus:outline-2 focus:outline-offset-2";

  const sizeStyles = {
    sm: "px-3 py-1.5 text-sm",
    md: "px-4 py-2 text-base",
    lg: "px-5 py-3 text-lg"
  };

  const variantStyles = {
    primary: "bg-blue-500 text-white hover:bg-blue-600 focus:outline-blue-500",
    secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:outline-gray-500",
    danger: "bg-red-500 text-white hover:bg-red-600 focus:outline-red-500"
  };

  return (
    <button
      className={`${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
}

// Usage
<Button size="lg" variant="primary">Save Changes</Button>
<Button size="sm" variant="danger">Delete</Button>

Vue コンポーネント

<template>
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
      {{ title }}
    </h3>
    <p class="text-gray-600 dark:text-gray-400">
      <slot />
    </p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>


<Card title="Feature Title">
  This is the card content that adapts to dark mode.
</Card>

Svelte コンポーネント

<script>
  export let type = 'info'; // info, success, warning, error

  const styles = {
    info: 'bg-blue-50 border-blue-200 text-blue-800',
    success: 'bg-green-50 border-green-200 text-green-800',
    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
    error: 'bg-red-50 border-red-200 text-red-800'
  };
</script>

<div class="border-l-4 p-4 {styles[type]}" role="alert">
  <slot />
</div>


<Alert type="success">
  Your changes have been saved successfully!
</Alert>

CSS コンポーネントクラス

コンポーネントを使用しないフレームワークや共有スタイルの場合：

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

/* Component layer for reusable patterns */
@layer components {
  .btn {
    @apply font-bold py-2 px-4 rounded transition;
  }

  .btn-primary {
    @apply bg-blue-500 text-white;
    @apply hover:bg-blue-600;
    @apply focus:outline-2 focus:outline-offset-2 focus:outline-blue-500;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-900;
    @apply hover:bg-gray-300;
  }

  .card {
    @apply bg-white rounded-lg shadow-xl p-6;
    @apply dark:bg-gray-800;
  }

  .input-field {
    @apply border border-gray-300 rounded px-3 py-2;
    @apply focus:border-blue-500 focus:ring-2 focus:ring-blue-200;
    @apply dark:bg-gray-700 dark:border-gray-600;
  }
}

<button class="btn btn-primary">Primary Action</button>
<div class="card">
  <h3>Card Title</h3>
  <p>Card content</p>
</div>
<input class="input-field" placeholder="Enter text..." />

テーマのカスタマイズ

テーマの拡張

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

@theme {
  /* Custom colors */
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  --color-brand-blue: #3b82f6;
  --color-brand-purple: #a855f7;

  /* Custom spacing */
  --spacing-18: 4.5rem;
  --spacing-72: 18rem;

  /* Custom breakpoints */
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;

  /* Custom fonts */
  --font-display: "Montserrat", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Custom shadows */
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.5);

  /* Custom border radius */
  --radius-4xl: 2rem;

  /* Custom z-index */
  --z-index-dropdown: 1000;
  --z-index-modal: 2000;
}

<div class="bg-primary text-white">Primary color</div>
<div class="font-display text-4xl">Display font</div>
<div class="shadow-glow rounded-4xl">Custom shadow and radius</div>
<div class="xs:grid-cols-2 3xl:grid-cols-6">Custom breakpoints</div>

CSS 変数の使用

/* Dynamic theming with CSS variables */
@import "tailwindcss";

@theme {
  --color-primary-50: oklch(0.95 0.02 250);
  --color-primary-100: oklch(0.90 0.04 250);
  --color-primary-200: oklch(0.85 0.08 250);
  --color-primary-500: oklch(0.55 0.22 250);
  --color-primary-900: oklch(0.25 0.15 250);
}

<div class="bg-[var(--color-primary-500)]">
  Using CSS variable
</div>


<div class="[--spacing:1rem] lg:[--spacing:2rem]">
  <div class="p-[var(--spacing)]">
    Responsive custom property
  </div>
</div>

カスタムユーティリティ

シンプルなカスタムユーティリティ

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

/* Simple utility */
@utility content-auto {
  content-visibility: auto;
}

/* Complex utility with nesting */
@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
  scrollbar-width: none;
}

<div class="content-auto hover:content-auto">
  Supports all variants automatically
</div>

<div class="scrollbar-hidden">
  Hidden scrollbar
</div>

機能的なカスタムユーティリティ

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

/* Define theme values */
@theme {
  --tab-size-2: 2;
  --tab-size-4: 4;
  --tab-size-8: 8;
}

/* Functional utility accepting arguments */
@utility tab-* {
  tab-size: --value(--tab-size-*);
}

/* Utility with modifiers */
@utility text-* {
  font-size: --value(--text-*, [length]);
  line-height: --modifier(--leading-*, [length], [*]);
}

/* Supporting arbitrary values */
@utility opacity-* {
  opacity: --value([percentage]);
  opacity: calc(--value(integer) * 1%);
  opacity: --value(--opacity-*);
}

<div class="tab-4">Tab size 4</div>
<div class="tab-[12]">Arbitrary tab size</div>

<p class="text-2xl/relaxed">Font size with line height modifier</p>

<div class="opacity-50">50% opacity from theme</div>
<div class="opacity-[0.35]">Arbitrary opacity</div>

本番環境向けの最適化

ビルド設定

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
  build: {
    minify: 'terser',
    cssMinify: true,
  }
})

コンテンツ設定

Tailwind がすべてのファイルをスキャンするようにします。

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

@source "../../**/*.{html,js,jsx,ts,tsx,vue,svelte}";

パフォーマンスに関するベストプラクティス

1. JIT モードを使用する（v4 ではデフォルトで有効）

   • 使用するクラスの CSS のみを生成します
   • ビルド時間を短縮できます
   • ファイルサイズを小さくできます

2. 任意の値を最小限に抑える

   • 可能な場合はテーマの値を使用します
   • 任意の値を使うと再利用が難しくなり、CSS のサイズが増加します

3. 深いネストを避ける

   • ユーティリティの組み合わせは適度に保ちます
   • 複雑なパターンはコンポーネントとして切り出します

4. 画像を最適化する

   <img
     class="w-full h-auto"
     src="/image.jpg"
     loading="lazy"
     decoding="async"
   />
   

5. CSS Containment を使用する

   <div class="content-auto">
     Browser can optimize rendering
   </div>
   

本番ビルドのチェックリスト

• CSS の圧縮を有効にする
• コンテンツソースを正しく設定する
• 未使用のカスタムユーティリティを削除する
• 画像アセットを最適化する
• ダークモードのバリアントをテストする
• レスポンシブのブレークポイントを確認する
• アクセシビリティを確認する（コントラスト、フォーカス状態）
• パフォーマンスをテストする（Lighthouse のスコア）

プラグインと拡張機能

公式プラグイン

Typography プラグイン

npm install @tailwindcss/typography

<article class="prose lg:prose-xl dark:prose-invert">
  <h1>Article Title</h1>
  <p>Automatically styled content with sensible defaults.</p>
</article>

Forms プラグイン

npm install @tailwindcss/forms

<form class="space-y-4">
  <input type="text" class="form-input rounded-md" />
  <select class="form-select rounded-md"></select>
  <textarea class="form-textarea rounded-md"></textarea>
</form>

Container Queries プラグイン

npm install @tailwindcss/container-queries

<div class="@container">
  <div class="@lg:grid-cols-3">
    Responds to container, not viewport
  </div>
</div>

フレームワークとの統合

React / Next.js

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
} satisfies Config

// Component with Tailwind
export default function Hero() {
  return (
    <section className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20">
      <div className="container mx-auto px-4">
        <h1 className="text-5xl font-bold mb-4">Welcome</h1>
        <p className="text-xl">Beautiful UI with Tailwind CSS</p>
      </div>
    </section>
  )
}

Vue / Nuxt

// nuxt.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  vite: {
    plugins: [tailwindcss()],
  },
})

Svelte / SvelteKit

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';

export default {
  plugins: [tailwindcss(), sveltekit()],
};

ベストプラクティス

命名と整理

1. セマンティック HTML を使用する

   
   <article class="bg-white rounded-lg p-6">
     <h2 class="text-2xl font-bold">Title</h2>
   </article>
   
   
   <div class="bg-white rounded-lg p-6">
     <div class="text-2xl font-bold">Title</div>
   </div>
   

2. ユーティリティの順序を統一する

   
   <div class="
     flex items-center justify-between
     p-4 mx-auto
     w-full max-w-4xl
     text-lg font-semibold
     bg-white rounded-lg shadow-md
     hover:shadow-lg transition
   ">
   

3. 繰り返し使うパターンを切り出す

   // Don't repeat long class strings
   const cardClasses = "bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6";
   
   <div className={cardClasses}>Card 1</div>
   <div className={cardClasses}>Card 2</div>
   

アクセシビリティ

<button class="focus:outline-2 focus:outline-offset-2 focus:outline-blue-500">
  Accessible button
</button>


<span class="sr-only">Additional context for screen readers</span>


<div class="border border-gray-300 forced-colors:border-current">
  Adapts to forced colors mode
</div>


<div class="transition-transform motion-reduce:transition-none">
  Respects prefers-reduced-motion
</div>

パフォーマンス

1. 動的な値にインラインスタイルを使用しない

   // Good - use CSS variables
   <button
     style={{ backgroundColor: buttonColor }}
     className="rounded-md px-3 py-1.5"
   >
   
   // Avoid - generates unique CSS for each color
   <button className={`bg-[${buttonColor}]`}>
   

2. パージを活用する

   • コンテンツパスが正しいことを確認します
   • 未使用のカスタムユーティリティを削除します
   • 本番ビルドをテストします

3. 初回描画を最適化する

   
   <style>
     .hero { /* Critical above-fold styles */ }
   </style>
   

よく使われるパターン

ナビゲーションバー

<nav class="bg-white dark:bg-gray-900 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      
      <div class="flex items-center">
        <img class="h-8 w-auto" src="/logo.svg" alt="Logo" />
      </div>

      
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">Home</a>
        <a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">About</a>
        <a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">Contact</a>
      </div>

      
      <button class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>
</nav>

ヒーローセクション

<section class="relative bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20 lg:py-32">
  <div class="container mx-auto px-4">
    <div class="max-w-3xl mx-auto text-center">
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
        Build Amazing Websites
      </h1>
      <p class="text-xl md:text-2xl mb-8 text-blue-100">
        Create beautiful, responsive designs with Tailwind CSS
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
          Get Started
        </button>
        <button class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">
          Learn More
        </button>
      </div>
    </div>
  </div>
</section>

フィーチャーグリッド

<section class="py-16 bg-gray-50 dark:bg-gray-900">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">
      Our Features
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition">
        <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
          Lightning Fast
        </h3>
        <p class="text-gray-600 dark:text-gray-400">
          Build and ship faster with utility-first CSS approach.
        </p>
      </div>

      
    </div>
  </div>
</section>

トラブルシューティング

よくある問題

スタイルが適用されない

• CSS のコンテンツ設定を確認します
• クラスが正しく記述されていることを確認します（誤字がないか確認）
• ビルド処理が実行されていることを確認します
• CSS の詳細度の競合を確認します

ダークモードが機能しない

• ダークバリアントの設定を確認します
• HTML 要素に dark クラスが適用されているか確認します
• localStorage のロジックが正しいことを確認します
• システム設定の検出をテストします

レスポンシブクラスが機能しない

• ブレークポイントの設定を確認します
• モバイルファーストのアプローチ（ベース → 大きい画面）になっているか確認します
• viewport の meta タグがあることを確認します
• 実際のデバイスまたはブラウザーの開発者ツールでテストします

ビルドが遅い

• JIT モードを使用します（v4 ではデフォルト）
• コンテンツパスを最適化します
• 不要な依存関係を削除します
• 循環インポートがないか確認します

ファイルサイズが大きすぎる

• コンテンツパスを正しく設定します
• 未使用のカスタムユーティリティを削除します
• CSS の圧縮を有効にします
• サードパーティの依存関係を監査します

リソース

• 公式ドキュメント：https://tailwindcss.com
• Tailwind UI コンポーネント：https://tailwindui.com
• Headless UI：https://headlessui.com
• Tailwind Play（オンラインエディター）：https://play.tailwindcss.com
• GitHub リポジトリ：https://github.com/tailwindlabs/tailwindcss
• コミュニティ Discord：https://tailwindcss.com/discord
• YouTube チャンネル：https://www.youtube.com/tailwindlabs

---

スキルのバージョン：1.0.0 最終更新日：2025年10月 スキルのカテゴリ：CSS フレームワーク、UI 開発、デザインシステム 対応対象：React、Vue、Svelte、Next.js、Nuxt、SvelteKit、Astro、バニラ HTML