use-tailwind-v4

Tailwind CSS v4

v4 の構文早見表

インポートとセットアップ

/* v4 import (replaces @tailwind directives) */
@import "tailwindcss";

/* Custom utilities (replaces @layer utilities) */
@utility tab-4 {
  tab-size: 4;
}

/* Loading JS config (if still needed) */
@config "../../tailwind.config.js";

テーマの CSS 変数

v4 では、すべてのテーマ値が CSS 変数として公開されます。theme() よりもこちらを優先してください。

background-color: var(--color-red-500);
font-family: var(--font-sans);

クイックリファレンス：v3 → v4 の変更点

名前が変更されたユーティリティ

v3	v4	備考
shadow-sm	shadow-xs	スケールが変更されました
shadow	shadow-sm	スケールが変更されました
drop-shadow-sm	drop-shadow-xs	スケールが変更されました
drop-shadow	drop-shadow-sm	スケールが変更されました
blur-sm	blur-xs	スケールが変更されました
blur	blur-sm	スケールが変更されました
backdrop-blur-sm	backdrop-blur-xs	スケールが変更されました
backdrop-blur	backdrop-blur-sm	スケールが変更されました
rounded-sm	rounded-xs	スケールが変更されました
rounded	rounded-sm	スケールが変更されました
outline-none	outline-hidden	outline-none は outline-style: none を設定するようになりました
ring	ring-3	デフォルトが 3px から 1px に変更されました

非推奨のユーティリティ（不透明度修飾子を使用）

<div class="bg-black bg-opacity-50">


<div class="bg-black/50">

また、flex-shrink-* → shrink-*、flex-grow-* → grow-*、overflow-ellipsis → text-ellipsis です。

デフォルトの変更

項目	v3 のデフォルト	v4 のデフォルト
ボーダーの色	gray-200	currentColor
リングの幅	3px	1px
リングの色	blue-500	currentColor
ボタンのカーソル	pointer	default

バリアントの重ね合わせ順序

右から左の順序から、左から右の順序に変更されました。

<ul class="first:*:pt-0">


<ul class="*:first:pt-0">

任意の値での変数構文

<div class="bg-[--brand-color]">


<div class="bg-(--brand-color)">

プレフィックス構文

<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">

プロジェクトのアップグレード

プロジェクトを移行するには、自動アップグレードツールを実行してください。

npx @tailwindcss/upgrade

Node.js 20+ が必要です。新しいブランチで実行し、変更内容を確認してください。

移行の詳細（PostCSS／Vite／CLI の設定、カスタムユーティリティ、フレームワーク固有の問題）については、references/upgrade-guide.md を参照してください。