1. ホーム
2. web
3. Tailwind CSS v4.0リリースとCSSベース設定への完全移行

はじめに

Tailwind CSS v4.0 は JavaScript ベースの設定から CSSファーストアーキテクチャ への大きな転換点です。tailwind.config.js は廃止され、デザイントークンはすべて CSS 内の @theme で定義します。本リリースでは Lightning CSS を統合し、CSS ネスティングや @layer といったモダンCSS機能をフル活用します。本記事では v3 からの移行手順を中心に解説します。

@theme による CSSファースト設定

v3 ではデザイントークンのカスタマイズに JavaScript が必要でした：

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#0f172a' },
      fontFamily: { display: ['Inter', 'sans-serif'] },
    },
  },
};

v4 ではすべてをメインCSSファイルに記述します：

@import "tailwindcss";

@theme {
  --color-brand: #0f172a;
  --font-family-display: 'Inter', sans-serif;
}

@theme ディレクティブが自動的にユーティリティクラス（bg-brand、font-display）を生成します。

@import ベースのセットアップと Lightning CSS

Tailwind v4 は単一の CSS レイヤーとしてインポートします：

@import "tailwindcss";
@import "./custom-components.css" layer(components);

内部エンジンには Lightning CSS を採用し、PostCSS + Autoprefixer のチェーンを置き換えました。大規模プロジェクトで 3〜10倍のビルド高速化 を実現します。

ネイティブネスティングやベンダープレフィックスを有効にするには：

@import "tailwindcss" source(none);
@import "./src/input.css" source("src");

モダンリセットと @layer

v4 のリセットは box-sizing: border-box のグローバル適用、全要素の margin: 0、改善されたフォームデフォルトを採用しています。カスケードレイヤー @layer に対応し、Tailwind と独自スタイルを柔軟に混在できます：

@layer base, components, utilities;
@import "tailwindcss" layer(base);
@import "./my-components.css" layer(components);

主なユーティリティ変更点

カスタム状態バリアントは @variant で定義：

@variant supports-hover {
  @media (hover: hover) { @content; }
}

v3 からの移行手順

1. tailwind.config.js と postcss.config.js を削除
2. v4 パッケージをインストール: npm install tailwindcss@next
3. メインCSS エントリを @import "tailwindcss" に変更
4. テーマ値を @theme ブロックに移動
5. @apply を通常のCSSまたは @layer に置き換え（v4 でも @apply は利用可能だが、複雑なケースではプレーンCSSを推奨）
6. 変更されたユーティリティ名を更新（shadow-sm → shadow-xs）
7. npx tailwindcss --input src/input.css --output dist/output.css で動作確認

まとめ

Tailwind CSS v4.0 は設定の JavaScript 依存を排除し、ネイティブ CSS 機能を最大限に活用するアーキテクチャへと進化しました。Lightning CSS による高速ビルド、@theme による透過的なデザイントークン管理、そしてモダンリセットの採用により、開発体験とパフォーマンスの両面で大きな進歩を遂げています。v3 からの移行には設定の全面的な見直しが必要ですが、その後の運用効率は大幅に向上するでしょう。