tailwindcss-v4

Tailwind CSS v4 スキル

CSS ファーストの設定、新しいディレクティブ、v3 からの移行。

クイックリファレンス

v4 のエントリーポイント

@import "tailwindcss";

v3 の方法ではありません：

/* ❌ These cause errors in v4 */
@tailwind base;
@tailwind components;
@tailwind utilities;

主なディレクティブ

ディレクティブ	用途
@theme	デザイントークン（色、間隔、フォント）を定義します
@utility	カスタムユーティリティクラスを作成します
@variant	カスタムバリアント（hover、focus など）を定義します
@source	クラスの検出とセーフリストを制御します
@reference	CSS を出力せずに @apply を使用するためにインポートします

テーマ設定（CSS ファースト）

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --font-display: "Inter", sans-serif;
  --spacing-18: 4.5rem;
}

tailwind.config.js ではありません：

// ❌ v3 pattern - don't use in v4
module.exports = {
  theme: {
    extend: {
      colors: { primary: '#3b82f6' }
    }
  }
}

カスタムユーティリティ

@utility content-auto {
  content-visibility: auto;
}

/* Functional utility must end in -* */
@utility tab-* {
  --tab-size: --value(--spacing-*, [integer]);
  tab-size: var(--tab-size);
}

カスタムバリアント

新しいバリアントを定義するには @custom-variant を使用します（@variant ではありません）。

@custom-variant hocus (&:hover, &:focus);

/* Dark mode with class strategy */
@custom-variant dark (&:is(.dark *));

/* Body block with @slot */
@custom-variant hocus {
  &:hover, &:focus { @slot; }
}

テーマ設定

@theme {
  --color-primary: #3b82f6;

  /* Clear namespace */
  --color-*: initial;
}

テーマフラグ

• default：デフォルトのテーマとマージします
• inline：変数を出力に出力します
• static：値を使用しますが、変数は出力しません
• reference：値を使用しますが、CSS は出力しません

@theme inline {
  --font-sans: "SF Pro Text", system-ui;
}

新しいグラデーション構文

<div class="bg-linear-to-r/oklch from-blue-500 to-purple-500"></div>

新しいバリアント

• @min-[400px]: / @max-[600px]:（コンテナクエリ）
• starting:（@starting-style）
• details-content:（::details-content）
• inverted-colors:、noscript:、print:

クラスのセーフリスト

/* Inline safelist */
@source inline("bg-red-500 text-white hidden");

/* From external source */
@source "../content/**/*.md";

v3 からの移行

v3	v4
@tailwind base/components/utilities	@import "tailwindcss"
tailwind.config.js theme.extend	@theme { --color-* }
PostCSS の tailwindcss プラグイン	@tailwindcss/postcss
設定値を使った @apply	先に @reference をインポート

PostCSS のセットアップ

// postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {}  // NOT 'tailwindcss'
  }
}

Vite のセットアップ

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()]
}

参照元：Tailwind v4 Docs、GitHub