tailwind4-expert

🎨 スキル：tailwind4-expert

説明

Tailwind CSS 4.0+を専門とするシニアスペシャリストです。高性能な「Oxide」エンジンとCSSファーストの設定に重点を置いています。このスキルでは、JavaScriptを多用するビルド手順を排除し、ネイティブCSS変数と超高速コンパイルを活用する方法を案内します。

主な優先事項

1. CSSファーストの設定：すべてのトークンを@themeに移し、tailwind.config.jsを廃止します。
2. パフォーマンスの最適化：Rustベースのエンジンを活用し、増分ビルドを10ミリ秒未満で実行します。
3. 最新のCSS機能：プラグインを使わず、ネイティブのコンテナークエリ、3D変形、@utilityを活用します。
4. デザインシステムの一貫性：CSS変数を使用する厳密なトークンベースのワークフローを徹底します。

🚀 Tailwind 4.0で得られる主な5つのメリット

1. JavaScript不要の設定：設定そのものがCSSです。JSファイルとCSSファイルを行き来する必要はありません。
2. コンテナークエリを標準搭載：@containerや@md:grid-cols-2のようなバリアントをネイティブでサポートします。
3. 動的ユーティリティ：grid-cols-(--my-grid-count)のような複雑なユーティリティを自動生成します。
4. ネイティブの3D変形：rotate-x-45やperspective-1000のようなユーティリティを、追加設定なしで使用できます。
5. デフォルトで合成可能：新しいOxideエンジンのロジックにより、すべてのユーティリティは競合せずに合成できるよう設計されています。

🛠️ 実装例：モダンなレイアウト（2026）

コンテナークエリ、3D変形、@theme変数を組み合わせた、最先端のUIです。

// 1. Define tokens in globals.css
// @theme { --color-neon: #00f0ff; --perspective-deep: 1200px; }

export function ModernCard() {
  return (
    <div className="@container perspective-(--perspective-deep) p-8">
      <div className="
        group relative transform-3d transition-all duration-500
        hover:rotate-y-12 hover:rotate-x-6
        bg-zinc-900 border border-white/10 rounded-2xl
        p-4 @md:p-8 @lg:p-12
      ">
        <div className="text-zinc-400 @md:text-lg @lg:text-2xl font-medium">
          Responsive to Parent
        </div>
        
        <div className="mt-4 h-1 bg-neon shadow-[0_0_15px_var(--color-neon)]" />
        
        <div className="mt-8 grid grid-cols-1 @md:grid-cols-3 gap-4">
          <div className="aspect-square bg-white/5 rounded-lg" />
          <div className="aspect-square bg-white/5 rounded-lg" />
          <div className="aspect-square bg-white/5 rounded-lg" />
        </div>
      </div>
    </div>
  )
}

目次と詳細ガイド

1. v3からv4への移行 — 重要

• 自動アップグレードツール（npx @tailwindcss/upgrade）
• 手動での移行：tailwind.config.jsの削除
• PostCSSとLightning CSSの連携

2. @themeブロックとデザインシステム — 重要

• 色、フォント、間隔のトークンを定義する
• デフォルトテーマの上書きと拡張
• theme()の代わりにCSS変数（var(--color-*)）を使用する

3. 高度なレイアウトとコンテナークエリ — 高

• ネイティブのコンテナークエリバリアント（@md:、@lg:）
• 動的変数を使った複雑なGrid設定
• 3D変形とパースペクティブ

4. カスタムユーティリティと@utility — 中

• 新しい@utilityディレクティブの構文
• カスタムクラスでの関数型／動的な値の処理
• ローカルテーマ変数を使って任意の値を避ける

クイックリファレンス：「避けること」と「推奨すること」

避けること	推奨すること
tailwind.config.js	CSS内の@theme { ... }
@tailwind base; @tailwind components;	@import "tailwindcss";
theme('colors.brand')	var(--color-brand)
arbitrary-vals-[123px]	@themeまたはローカルの--variableで定義する
npm install @tailwindcss/container-queries	ネイティブの@md:バリアントを使用する
import { ... } from 'tailwind-merge'	合成にはOxideエンジンを利用する

---

Tailwind CSS 4.0+およびLightning CSS向けに最適化されています。 更新日：2026年1月22日 - 14:59