Tailwind v4

ついに登場です！ Tailwind v4 と React 19。すぐに試してみる準備ができています。今日から使い始めることができます。

新着情報#

• CLI は、Tailwind v4 を使用してプロジェクトを初期化できるようになりました。
• 新しい @theme ディレクティブと @theme inline オプションの完全なサポート。
• すべてのコンポーネントが Tailwind v4 および React 19 用に更新されました。
• forwardRefs を削除し、型を調整しました。
• すべてのプリミティブに、スタイリング用の data-slot 属性が追加されました。
• コンポーネントのスタイルを修正し、クリーンアップしました。
• toast コンポーネントを廃止し、sonner を採用しました。
• ボタンはデフォルトのカーソルを使用するようになりました。
• default スタイルは廃止されます。新しいプロジェクトは new-york を使用します。
• HSL カラーが OKLCH に変換されるようになりました。

注: これは壊れません。 Tailwind v3 および React 18 を使用する既存のアプリは引き続き動作します。新しいコンポーネントを追加すると、アップグレードするまで、それらは v3 および React 18 のままになります。新しいプロジェクトのみが Tailwind v4 および React 19 で開始されます。

試してみる#

Tailwind v4 + React 19 は今すぐ使い始めることができます。開始方法については、以下のフレームワーク固有のガイドを参照してください。

プロジェクトをアップグレードする#

shadcn/ui を使用する主な利点の 1 つは、最終的に自分で作成するコードとまったく同じになることです。隠された抽象化はありません。

つまり、依存関係に新しいリリースがある場合は、公式のアップグレードパスに従うだけで済みます。

既存のプロジェクトをアップグレードする方法は次のとおりです (完全なドキュメントは準備中です)。

1. Tailwind v4 アップグレードガイドに従います。#

• 公式アップグレードガイドに従って Tailwind v4 にアップグレードします: https://tailwindcss.com/docs/upgrade-guide
• @tailwindcss/upgrade@next codemod を使用して、非推奨のユーティリティクラスを削除し、Tailwind の構成を更新します。

2. CSS 変数を更新します。#

codemod は、CSS 変数を @theme ディレクティブの下の参照として移行します。

コピー@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
  }
}
 
@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
}

これは機能します。ただし、色やその他の変数の操作を容易にするために、hsl ラッパーを移動し、@theme inline を使用する必要があります。

その方法は次のとおりです。

1. :root と .dark を @layer ベースの外に移動します。
2. カラー値を hsl() でラップします。
3. inline オプションを @theme、つまり @theme inline に追加します。
4. @theme から hsl() ラッパーを削除します。

コピー:root {
  --background: hsl(0 0% 100%); // <-- Wrap in hsl
  --foreground: hsl(0 0% 3.9%);
}
 
.dark {
  --background: hsl(0 0% 3.9%); // <-- Wrap in hsl
  --foreground: hsl(0 0% 98%);
}
 
@theme inline {
  --color-background: var(--background); // <-- Remove hsl
  --color-foreground: var(--foreground);
}

この変更により、ユーティリティクラスの内外や、JavaScript で色の値を使用する場合など、CSS の外部でテーマ変数にアクセスすることがはるかに簡単になります。

3. グラフの色を更新する#

テーマカラーには hsl() が付属しているため、chartConfig のラッパーを削除できます。

コピーconst chartConfig = {
  desktop: {
    label: "Desktop",
-    color: "hsl(var(--chart-1))",
+    color: "var(--chart-1)",
  },
  mobile: {
    label: "Mobile",
-   color: "hsl(var(--chart-2))",
+   color: "var(--chart-2)",
  },
} satisfies ChartConfig

4. 新しい size-* ユーティリティを使用する#

新しい size-* ユーティリティ (Tailwind v3.4 で追加) が、tailwind-merge で完全にサポートされるようになりました。 w-* h-* を新しい size-* ユーティリティに置き換えることができます。

コピー- w-4 h-4
+ size-4

5. 依存関係を更新する#

コピーpnpm up "@radix-ui/*" cmdk lucide-react recharts tailwind-merge clsx --latest

6. forwardRef を削除する#

remove-forward-ref codemod を使用して、forwardRef を props に移行したり、プリミティブを手動で更新したりできます。

codemod については、https://github.com/reactjs/react-codemod#remove-forward-ref. を参照してください。

手動で行う場合は、次の手順に従います。

1. React.forwardRef<...> を React.ComponentProps<...> に置き換えます。
2. ref={ref} をコンポーネントから削除します。
3. data-slot 属性を追加します。Tailwind とのスタイリングに重宝します。
4. オプションで、名前付き関数に変換し、displayName を削除できます。

前に#

コピーconst AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b last:border-b-0", className)}
    {...props}
  />
))
AccordionItem.displayName = "AccordionItem"

後#

コピーfunction AccordionItem({
  className,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn("border-b last:border-b-0", className)}
      {...props}
    />
  )
}

変更履歴#

2025 年 3 月 19 日 - tailwindcss-animate を廃止#

tailwindcss-animate を非推奨にし、tw-animate-css を採用しました。

新しいプロジェクトには、デフォルトで tw-animate-css がインストールされます。

既存のプロジェクトの場合は、以下の手順に従って移行します。

1. 依存関係から tailwindcss-animate を削除します。
2. globals.css ファイルから @plugin 'tailwindcss-animate' を削除します。
3. tw-animate-css を開発依存関係としてインストールします。
4. @import "tw-animate-css" を globals.css ファイルに追加します。

コピー- @plugin 'tailwindcss-animate';
+ @import "tw-animate-css";

2025 年 3 月 12 日 - 新しいダークモードの色#

ダークモードのカラーを見直し、よりアクセシビリティに優れた配色に更新しました。

既存の Tailwind v4 プロジェクト (アップグレードされたプロジェクトではない¹) を実行している場合は、CLI² を使用してコンポーネントを再追加することで、新しいダークモードカラーを使用するようにコンポーネントを更新できます。

コピーgit add .
git commit -m "..."

pnpmnpmyarnbun
pnpm dlx shadcn@latest add --all --overwrite
コピー