mcpField
T
tailwindcss

tailwindcss

github.com/timelesscoデザイン・UI79 回インストール
リポジトリ

tailwindcss について

Web インターフェースのスタイリングに Tailwind CSS を使うためのスキルガイドです。各種 Web フレームワークでの開発者向けに、レスポンシブレイアウト、テーマ、状態別スタイル、ビルド時の CSS 生成を扱います。

主な機能

  1. 01ユーティリティクラスによるスタイリング
  2. 02レスポンシブレイアウトとブレークポイント
  3. 03テーマトークンとカスタマイズ
  4. 04ダークモードとインタラクション状態
  5. 05ビルド時の CSS 最適化

活用シーン

  1. 01Web アプリのコンポーネントのスタイリング
  2. 02モバイルファーストのページ構築
  3. 03一貫性のあるデザインシステム作成
  4. 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>

トラブルシューティング

クラスが動作しない
  1. コンテンツ設定を確認します:
// tailwind.config.js
content: [
	"./src/**/*.{js,jsx,ts,tsx}",
	// Add all file paths where you use Tailwind
];
  1. 動的クラスは動作しません:
// ❌ Won't work
const color = 'blue'
<div className={`text-${color}-500`} />

// ✅ Works
<div className={color === 'blue' ? 'text-blue-500' : 'text-red-500'} />
  1. 詳細度の問題:
/* 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\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
	]
}

リソース

フレームワーク統合の例

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 拡張機能をインストールする
  • 再利用可能なコンポーネントパターンを作成する
  • レスポンシブブレークポイントを実装する
  • アクセシビリティに配慮したフォーカス状態を追加する
  • すべてのコンポーネントでダークモードをテストする
  • 本番ビルド向けに最適化する
  • カスタムユーティリティとコンポーネントをドキュメント化する

コメント