tailwindcss について
Web インターフェースのスタイリングに Tailwind CSS を使うためのスキルガイドです。各種 Web フレームワークでの開発者向けに、レスポンシブレイアウト、テーマ、状態別スタイル、ビルド時の CSS 生成を扱います。
主な機能
- 01ユーティリティクラスによるスタイリング
- 02レスポンシブレイアウトとブレークポイント
- 03テーマトークンとカスタマイズ
- 04ダークモードとインタラクション状態
- 05ビルド時の CSS 最適化
活用シーン
- 01Web アプリのコンポーネントのスタイリング
- 02モバイルファーストのページ構築
- 03一貫性のあるデザインシステム作成
- 04ダークモードや状態別スタイルの追加
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ timelessco/ recollect --skill tailwindcssインストール後、Claude Code で/tailwindcssを入力して読み込まれたか確認します。
詳細
Tailwind CSS スキル
Tailwind CSS はユーティリティファーストの CSS フレームワークで、あらかじめ用意されたユーティリティクラスによって UI をすばやく開発できます。プロジェクトのファイルをスキャンしてビルド時に最適化された CSS を生成するため、実行時のオーバーヘッドがなく、本番用バンドルを最小限に抑えられます。
このスキルを使用する場面
次のような場合に、このスキルを使用します。
- モバイルファーストのデザインでレスポンシブなレイアウトを構築する
- ダークモードやテーマのカスタマイズを実装する
- 一貫した余白、色、タイポグラフィを備えたカスタムデザインシステムを作成する
- React、Vue、Svelte、または任意の Web フレームワークのコンポーネントをスタイリングする
- 見た目をすばやく確認しながらインターフェースのプロトタイプを作成する
- 最適化された CSS バンドルを備えた本番アプリケーションを構築する
- 状態に基づくスタイリング(ホバー、フォーカス、無効状態など)を扱う
- Grid や Flexbox のユーティリティで複雑なレイアウトを作成する
基本概念
ユーティリティファーストのアプローチ
Tailwind は、カスタム CSS を記述する代わりに、HTML 要素へ直接適用する低レベルのユーティリティクラスを提供します。
<div class="card">
<h2 class="card-title">Title</h2>
</div>
<div class="rounded-lg bg-white p-6 shadow-md">
<h2 class="text-2xl font-bold text-gray-900">Title</h2>
</div>
メリット:
- CSS ファイルを行き来する必要がなく、スタイルをマークアップと一緒に管理できます
- 命名規則が不要です
- 使用されていないコードは自動的に削除されます
- チーム全体で一貫したデザイントークンを使用できます
- CSS が肥大化せず、すばやく反復できます
ビルド時の処理
Tailwind はビルド時にソースファイルをスキャンし、実際に使用する CSS クラスのみを生成します。
// Tailwind analyzes these files
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./app/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
];
結果:実行時のオーバーヘッドがない、最適化された本番用バンドルが生成されます。
インストールとセットアップ
Vite を使った最新のセットアップ
ステップ 1:依存関係をインストールする
npm install -D tailwindcss @tailwindcss/vite
# or
pnpm add -D tailwindcss @tailwindcss/vite
# or
yarn add -D tailwindcss @tailwindcss/vite
ステップ 2:Vite を設定する
// vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [tailwindcss()],
});
ステップ 3:CSS にインポートする
/* src/index.css */
@import "tailwindcss";
ステップ 4:HTML でスタイルシートを参照する
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./src/index.css" />
</head>
<body>
<div class="bg-blue-500 p-4 text-white">Hello Tailwind!</div>
</body>
</html>
フレームワーク別のセットアップ
Next.js(App Router):
npx create-next-app@latest --tailwind
Next.js(手動):
// tailwind.config.js
module.exports = {
content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
};
Vite を使った React:
npm create vite@latest my-app -- --template react
npm install -D tailwindcss @tailwindcss/vite
Vue:
npm install -D tailwindcss @tailwindcss/vite
Svelte:
npm install -D tailwindcss @tailwindcss/vite
Astro:
npx astro add tailwind
PostCSS のセットアップ(代替方法)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
// postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
デザインシステムとトークン
デフォルトのデザインシステム
Tailwind には、包括的なデフォルトのデザインシステムが含まれています。
- 色:各 11 段階(50〜950)の 18 種類のカラーパレット
- 余白:0.25rem から 96rem までの一貫したスケール
- タイポグラフィ:フォントサイズ、太さ、行の高さ
- ブレークポイント:モバイルファーストのレスポンシブシステム
- シャドウ:奥行きを表現するための立体感システム
- 角丸:複数のスケールで設定された角丸
テーマのカスタマイズ
CSS で @theme ディレクティブを使用します。
@import "tailwindcss";
@theme {
/* Custom colors */
--color-brand-50: oklch(0.97 0.02 264);
--color-brand-500: oklch(0.55 0.22 264);
--color-brand-900: oklch(0.25 0.15 264);
/* Custom fonts */
--font-display: "Satoshi", "Inter", sans-serif;
--font-body: "Inter", system-ui, sans-serif;
/* Custom spacing */
--spacing-18: calc(var(--spacing) * 18);
--spacing-navbar: 4.5rem;
/* Custom breakpoints */
--breakpoint-3xl: 120rem;
--breakpoint-4xl: 160rem;
/* Custom shadows */
--shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
}
使用方法:
<div class="bg-brand-500 font-display shadow-glow">Custom themed element</div>
カラーシステム
デフォルトの色を使用する:
<div class="bg-blue-500">Background</div>
<p class="text-red-600">Text</p>
<div class="border-green-400">Border</div>
色のスケール:
- 50:最も明るい
- 100〜400:明るいバリエーション
- 500:基本色
- 600〜800:暗いバリエーション
- 950:最も暗い
色の不透明度修飾子:
<div class="bg-black/75">75% opacity</div>
<div class="text-blue-500/30">30% opacity</div>
<div class="bg-purple-500/87">87% opacity</div>
ユーティリティクラス
レイアウト
表示:
<div class="block">Block</div>
<div class="inline-block">Inline Block</div>
<div class="flex">Flex</div>
<div class="inline-flex">Inline Flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden</div>
Flexbox:
<div class="flex items-center justify-between gap-4">
<div>Item 1</div>
<div>Item 2</div>
</div>
<div class="flex flex-col items-start">
<div>Vertical stack</div>
</div>
Grid:
<div class="grid grid-cols-3 gap-4">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
<div class="grid grid-cols-[1fr_500px_2fr] gap-6">
<div>Flexible</div>
<div>Fixed 500px</div>
<div>More flexible</div>
</div>
配置:
<div class="relative">
<div class="absolute top-0 right-0">Positioned</div>
</div>
<div class="fixed right-4 bottom-4">Fixed</div>
<div class="sticky top-0">Sticky header</div>
余白
パディングとマージン:
<div class="p-4">Padding all sides</div>
<div class="px-6 py-3">Padding X and Y</div>
<div class="pt-8 pb-4">Padding top/bottom</div>
<div class="m-4">Margin all sides</div>
<div class="mx-auto">Center horizontally</div>
<div class="-mt-4">Negative margin</div>
ギャップ(Flexbox/Grid):
<div class="flex gap-4">Flex with gap</div>
<div class="grid grid-cols-3 gap-x-6 gap-y-4">Grid with X/Y gap</div>
タイポグラフィ
フォントサイズ:
<p class="text-xs">Extra small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2XL</p>
<h1 class="text-4xl font-bold">Heading</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-justify">Justified</p>
行の高さ:
<p class="leading-tight">Tight line height</p>
<p class="leading-normal">Normal line height</p>
<p class="leading-relaxed">Relaxed line height</p>
フォントユーティリティの組み合わせ:
<h1 class="text-4xl/tight font-bold">Font size 4xl with tight line-height</h1>
色と背景
背景色:
<div class="bg-white">White background</div>
<div class="bg-gray-100">Gray background</div>
<div class="bg-linear-to-r from-blue-500 to-purple-600">
Gradient background
</div>
テキストの色:
<p class="text-gray-900">Dark text</p>
<p class="text-blue-600">Blue text</p>
<a class="text-blue-500 hover:text-blue-700">Link</a>
境界線
<div class="border">Default border</div>
<div class="border-2 border-gray-300">2px border</div>
<div class="border-t border-b-2">Top and bottom borders</div>
<div class="rounded-sm">Rounded corners</div>
<div class="rounded-lg">Large rounded</div>
<div class="rounded-full">Fully rounded</div>
<div class="rounded-md border border-red-500">Combined</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">No shadow</div>
レスポンシブデザイン
モバイルファーストのブレークポイント
Tailwind はモバイルファーストのアプローチを採用しています。基本のスタイルはすべての画面サイズに適用されます。その後、ブレークポイントのプレフィックスを使って、大きな画面サイズで上書きします。
ブレークポイント:
sm:- 640px 以上md:- 768px 以上lg:- 1024px 以上xl:- 1280px 以上2xl:- 1536px 以上
例:
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
<div class="hidden lg:block">Desktop only content</div>
<div class="block lg:hidden">Mobile only content</div>
<h1 class="text-2xl md:text-4xl lg:text-6xl">Responsive heading</h1>
カスタムブレークポイント
@theme {
--breakpoint-3xl: 120rem;
--breakpoint-tablet: 48rem;
}
<div class="tablet:grid-cols-2 3xl:grid-cols-6">Custom breakpoints</div>
最大幅クエリ
<div class="flex max-md:hidden">Hidden on mobile</div>
<div class="md:block lg:hidden">Only visible on tablets</div>
コンテナクエリ
親コンテナの幅に基づいて要素をスタイリングします。
<div class="@container">
<div class="@md:grid-cols-2 @lg:grid-cols-3">Responds to parent width</div>
</div>
インタラクティブな状態
ホバー状態
<button class="bg-blue-500 text-white hover:bg-blue-700">Hover me</button>
<a class="text-blue-600 hover:underline"> Hover link </a>
<div class="scale-100 transition-transform hover:scale-105">Scale on hover</div>
フォーカス状態
<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />
<button
class="bg-blue-500 focus:ring-4 focus:ring-blue-300 focus:outline-hidden"
>
Accessible button
</button>
アクティブ状態
<button class="bg-blue-500 active:bg-blue-800">Click me</button>
無効状態
<button
class="bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
disabled
>
Disabled button
</button>
<input class="disabled:bg-gray-100" disabled />
フォームの状態
<input class="invalid:border-red-500 focus:invalid:ring-red-200" required />
<input
class="placeholder:text-gray-400 placeholder:italic"
placeholder="Search..."
/>
<input type="checkbox" class="checked:bg-blue-500" />
グループホバー(親の状態)
<div class="group hover:bg-gray-100">
<p class="group-hover:text-blue-600">Text changes when parent is hovered</p>
<img class="group-hover:opacity-50" src="..." />
</div>
ピア状態(兄弟要素の状態)
<input type="checkbox" class="peer" id="terms" />
<label for="terms" class="peer-checked:text-blue-600"> I accept terms </label>
<input type="email" class="peer" required />
<p class="hidden text-red-600 peer-invalid:block">Invalid email</p>
ダークモード
ダークモードの設定
メディアクエリアプローチ(自動):
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
Auto switches based on system preference
</div>
クラスベースのアプローチ(手動切り替え):
// Add .dark class to <html> element
document.documentElement.classList.toggle("dark");
ダークモードユーティリティ
<div class="bg-white dark:bg-slate-900">Background</div>
<p class="text-gray-900 dark:text-gray-100">Text</p>
<div class="border-gray-200 dark:border-gray-700">Border</div>
<div
class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900"
>
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
Dark mode card
</h2>
<p class="text-gray-600 dark:text-gray-300">Content adapts to theme</p>
</div>
ダークモード切り替えの実装
// Store preference
function toggleDarkMode() {
const isDark = document.documentElement.classList.toggle("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
}
// Initialize on load
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
}
任意の値
単発のカスタム値には角括弧を使用します。
ピクセル値:
<div class="top-[117px]">Custom position</div>
<p class="text-[22px]">Custom font size</p>
<div class="w-[500px]">Custom width</div>
色:
<div class="bg-[#bada55]">Custom hex color</div>
<div class="text-[rgb(123,45,67)]">RGB color</div>
<div class="bg-[oklch(0.55_0.22_264)]">OKLCH color</div>
CSS 変数:
<div class="bg-(--my-brand-color)">CSS variable</div>
<div class="text-(length:--my-font-size)">Type hint</div>
複雑な値:
<div class="grid-cols-[1fr_500px_2fr]">Custom grid</div>
<div class="content-['>']">Custom content</div>
<div class="mask-type-luminance">Custom property</div>
トランジションとアニメーション
トランジション
<button class="bg-blue-500 transition-colors hover:bg-blue-700">
Smooth color transition
</button>
<div class="transform transition-transform hover:scale-110">
Scale with transition
</div>
<div class="transition-all duration-300 ease-in-out hover:shadow-lg">
Multiple transitions
</div>
<div class="transition duration-150">Fast</div>
<div class="transition duration-300">Normal</div>
<div class="transition duration-500">Slow</div>
変形
<div class="scale-95 hover:scale-100">Scale</div>
<div class="rotate-45">Rotate 45deg</div>
<div class="hover:rotate-6">Slight rotation</div>
<div class="translate-x-4 translate-y-2">Move</div>
<div class="skew-x-12">Skew</div>
<div class="translate-x-2 scale-110 rotate-3 transform">
Multiple transforms
</div>
アニメーション
<div class="animate-spin">Spinning</div>
<div class="animate-ping">Pinging</div>
<div class="animate-pulse">Pulsing</div>
<div class="animate-bounce">Bouncing</div>
カスタムアニメーション
@theme {
--animate-slide-in: slide-in 0.5s ease-out;
}
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
<div class="animate-slide-in">Custom animation</div>
高度なパターン
カスタムユーティリティ
再利用可能なユーティリティクラスを作成します。
@utility content-auto {
content-visibility: auto;
}
@utility tab-* {
tab-size: var(--tab-size-*);
}
<div class="content-auto">Custom utility</div>
<pre class="tab-4">Custom tab size</pre>
カスタムバリアント
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
@custom-variant aria-checked (&[aria-checked="true"]);
<div theme-midnight:bg-navy-900>Applies when data-theme="midnight"</div>
レイヤーの整理
@layer base {
h1 {
@apply text-4xl font-bold;
}
body {
@apply bg-white text-gray-900;
}
}
@layer components {
.btn {
@apply rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-700;
}
.card {
@apply rounded-lg bg-white p-6 shadow-md;
}
}
Apply ディレクティブ
繰り返し使用するユーティリティを CSS クラスにまとめます。
.btn-primary {
@apply rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700;
}
.input-field {
@apply rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-hidden;
}
コンポーネントの例
ボタンコンポーネント
<button
class="transform rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white shadow-md transition-all duration-200 hover:scale-105 hover:bg-blue-700 hover:shadow-lg focus:ring-4 focus:ring-blue-300 focus:outline-hidden active:bg-blue-800 disabled:cursor-not-allowed disabled:opacity-50"
>
Click me
</button>
<button
class="rounded-lg border-2 border-gray-300 bg-white px-6 py-3 font-semibold text-gray-700 hover:bg-gray-50"
>
Secondary
</button>
<button class="rounded-full p-2 transition-colors hover:bg-gray-100">
<svg class="h-6 w-6">...</svg>
</button>
カードコンポーネント
<div
class="overflow-hidden rounded-xl bg-white shadow-lg transition-shadow hover:shadow-xl dark:bg-gray-800"
>
<img class="h-48 w-full object-cover" src="..." alt="Card image" />
<div class="p-6">
<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
Card Title
</h3>
<p class="mb-4 text-gray-600 dark:text-gray-300">
Card description text goes here
</p>
<button
class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700"
>
Learn More
</button>
</div>
</div>
フォームコンポーネント
<form
class="mx-auto max-w-md rounded-lg bg-white p-8 shadow-md dark:bg-gray-800"
>
<div class="mb-6">
<label
class="mb-2 block font-semibold text-gray-700 dark:text-gray-300"
for="email"
>
Email
</label>
<input
type="email"
id="email"
class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-hidden dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder="[email protected]"
/>
</div>
<div class="mb-6">
<label
class="mb-2 block font-semibold text-gray-700 dark:text-gray-300"
for="password"
>
Password
</label>
<input
type="password"
id="password"
class="w-full rounded-lg border border-gray-300 px-4 py-2 invalid:border-red-500 focus:ring-2 focus:ring-blue-500 focus:outline-hidden dark:border-gray-600 dark:bg-gray-700 dark:text-white"
/>
</div>
<button
type="submit"
class="w-full rounded-lg bg-blue-600 py-3 font-bold text-white transition-colors hover:bg-blue-700"
>
Sign In
</button>
</form>
ナビゲーションコンポーネント
<nav class="sticky top-0 z-50 bg-white shadow-md dark:bg-gray-900">
<div class="container mx-auto px-4">
<div class="flex h-16 items-center justify-between">
<div class="flex items-center gap-8">
<a href="/" class="text-2xl font-bold text-blue-600">Logo</a>
<div class="hidden gap-6 md:flex">
<a
href="#"
class="text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300"
>Home</a
>
<a
href="#"
class="text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300"
>About</a
>
<a
href="#"
class="text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300"
>Services</a
>
</div>
</div>
<button
class="rounded-sm p-2 hover:bg-gray-100 md:hidden dark:hover:bg-gray-800"
>
<svg class="h-6 w-6">...</svg>
</button>
</div>
</div>
</nav>
グリッドレイアウト
<div class="container mx-auto px-4 py-8">
<div
class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
>
<div class="rounded-lg bg-white p-6 shadow-md">Item 1</div>
<div class="rounded-lg bg-white p-6 shadow-md">Item 2</div>
<div class="rounded-lg bg-white p-6 shadow-md">Item 3</div>
<div class="rounded-lg bg-white p-6 shadow-md">Item 4</div>
</div>
</div>
ベストプラクティス
1. 一貫したスペーシングスケールを使用する
<div class="mb-6 p-4">
<div class="mb-[23px] p-[17px]"></div>
</div>
2. デザイントークンを活用する
<button class="bg-blue-600 hover:bg-blue-700">
<button class="bg-[#3B82F6] hover:bg-[#2563EB]"></button>
</button>
3. モバイルファーストのレスポンシブデザイン
<div class="text-base md:text-lg lg:text-xl">
<div class="text-xl lg:text-base"></div>
</div>
4. コンポーネントの抽出
// React component with Tailwind
function Button({ children, variant = "primary" }) {
const baseClasses = "font-semibold px-6 py-3 rounded-lg transition-colors";
const variants = {
primary: "bg-blue-600 hover:bg-blue-700 text-white",
secondary: "bg-gray-200 hover:bg-gray-300 text-gray-900",
};
return (
<button className={`${baseClasses} ${variants[variant]}`}>
{children}
</button>
);
}
5. 繰り返しパターンには @apply を使用する
/* Only use @apply for truly repeated patterns */
@layer components {
.card {
@apply rounded-lg bg-white p-6 shadow-md transition-shadow hover:shadow-lg;
}
}
6. アクセシビリティを最優先する
<button class="focus:ring-4 focus:ring-blue-300 focus:outline-hidden">
Accessible button
</button>
<a class="text-blue-600 hover:underline focus:outline-2 focus:outline-offset-2">
Accessible link
</a>
7. パフォーマンスの最適化
- 本番環境では PurgeCSS を使用します(モダンなセットアップでは自動的に適用されます)
- 動的なクラス名は避けます。
class={text-${color}-500}は動作しません - 必要に応じて、動的クラスにはセーフリストを使用します
8. ダークモードの一貫性
<div
class="border border-gray-200 bg-white text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
>
Complete dark mode support
</div>
よくあるパターン
コンテンツの中央揃え
<div class="flex justify-center">Content</div>
<div class="mx-auto w-fit">Content</div>
<div class="flex h-screen items-center">Content</div>
<div class="flex h-screen items-center justify-center">Centered content</div>
最大幅を指定した全幅コンテナ
<div class="container mx-auto max-w-7xl px-4">
Content with consistent max width
</div>
アスペクト比を指定したボックス
<div class="aspect-square">Square</div>
<div class="aspect-video">16:9 video</div>
<div class="aspect-4/3">4:3 ratio</div>
テキストの省略表示
<p class="truncate">Long text that will be truncated with ellipsis...</p>
<p class="line-clamp-3">
Long text that will be truncated after 3 lines with ellipsis...
</p>
スムーズスクロール
<html class="scroll-smooth">
<a href="#section">Smooth scroll to section</a>
</html>
トラブルシューティング
クラスが動作しない
- コンテンツ設定を確認します:
// tailwind.config.js
content: [
"./src/**/*.{js,jsx,ts,tsx}",
// Add all file paths where you use Tailwind
];
- 動的クラスは動作しません:
// ❌ Won't work
const color = 'blue'
<div className={`text-${color}-500`} />
// ✅ Works
<div className={color === 'blue' ? 'text-blue-500' : 'text-red-500'} />
- 詳細度の問題:
/* Use !important sparingly */
<div class="text-red-500!">Overrides other styles</div>
ビルドの問題
# Clear cache and rebuild
rm -rf .next node_modules/.cache
npm run dev
IntelliSense が動作しない
公式拡張機能をインストールします。
- VS Code:「Tailwind CSS IntelliSense」
.vscode/settings.jsonで設定します。
{
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
}
リソース
- 公式ドキュメント:https://tailwindcss.com/docs
- Tailwind UI コンポーネント:https://tailwindui.com
- Headless UI(スタイルなしのコンポーネント):https://headlessui.com
- Tailwind Play(オンラインプレイグラウンド):https://play.tailwindcss.com
- カラーパレットジェネレーター:https://uicolors.app
- コミュニティコンポーネント:https://tailwindcomponents.com
フレームワーク統合の例
React
export function Card({ title, description }) {
return (
<div className="rounded-lg bg-white p-6 shadow-md transition-shadow hover:shadow-lg">
<h3 className="mb-2 text-2xl font-bold">{title}</h3>
<p className="text-gray-600">{description}</p>
</div>
);
}
Vue
<template>
<div
class="rounded-lg bg-white p-6 shadow-md transition-shadow hover:shadow-lg"
>
<h3 class="mb-2 text-2xl font-bold">{{ title }}</h3>
<p class="text-gray-600">{{ description }}</p>
</div>
</template>
<script setup>
defineProps(["title", "description"]);
</script>
Svelte
<script>
export let title
export let description
</script>
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
<h3 class="text-2xl font-bold mb-2">{title}</h3>
<p class="text-gray-600">{description}</p>
</div>
実装チェックリスト
Tailwind CSS を実装する際は、次の項目を確認してください。
-
tailwindcssとフレームワーク固有のプラグインをインストールする - ビルドツール(Vite/PostCSS/CLI)を設定する
- 設定でコンテンツパスを設定する
- CSS ファイルで Tailwind をインポートする
- カスタムテーマトークンを設定する(必要な場合)
- ダークモードの方式を設定する
- VS Code IntelliSense 拡張機能をインストールする
- 再利用可能なコンポーネントパターンを作成する
- レスポンシブブレークポイントを実装する
- アクセシビリティに配慮したフォーカス状態を追加する
- すべてのコンポーネントでダークモードをテストする
- 本番ビルド向けに最適化する
- カスタムユーティリティとコンポーネントをドキュメント化する