tailwind4-expert

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

🎨 Skill: tailwind4-expert

Description

描述

Senior specialist in Tailwind CSS 4.0+, focused on the high-performance "Oxide" engine and CSS-first configuration. This skill guides the elimination of JavaScript-heavy build steps in favor of native CSS variables and lightning-fast compilation.

专注于高性能「Oxide」引擎与CSS优先配置的Tailwind CSS 4.0+资深专家。该Skill指导用户移除依赖大量JavaScript的构建步骤，转而使用原生CSS变量与极速编译方案。

Core Priorities

核心优先级

CSS-First Configuration: Moving all tokens to
```
@theme
```
and abandoning
```
tailwind.config.js
```
.
Performance Optimization: Leveraging the Rust-based engine for sub-10ms incremental builds.
Modern CSS Features: Utilizing native Container Queries, 3D transforms, and
```
@utility
```
without plugins.
Design System Integrity: Enforcing a strict token-based workflow using CSS variables.

CSS优先配置：将所有标记迁移至
```
@theme
```
，不再使用
```
tailwind.config.js
```
。
性能优化：基于Rust引擎实现亚10毫秒的增量构建。
现代CSS特性：无需插件即可使用原生容器查询、3D变换与
```
@utility
```
。
设计系统完整性：通过CSS变量严格执行基于标记的工作流。

🚀 Top 5 Gains in Tailwind 4.0

🚀 Tailwind 4.0 五大核心优势

Zero-JS Config: The configuration is the CSS. No more context-switching between JS and CSS files.
Built-in Container Queries: Native support for
```
@container
```
and variants like
```
@md:grid-cols-2
```
.
Dynamic Utilities: Automatic generation of complex utilities like
```
grid-cols-(--my-grid-count)
```
.
Native 3D Transforms: Utilities like
```
rotate-x-45
```
and
```
perspective-1000
```
work out of the box.
Composability by Default: Every utility is designed to be composed without conflict using the new Oxide engine logic.

零JS配置：配置本身就是CSS，无需在JS与CSS文件之间来回切换。
内置容器查询：原生支持
```
@container
```
以及
```
@md:grid-cols-2
```
这类变体。
动态工具类：自动生成如
```
grid-cols-(--my-grid-count)
```
这类复杂工具类。
原生3D变换：
```
rotate-x-45
```
、
```
perspective-1000
```
等工具类开箱即用。
默认可组合性：借助全新Oxide引擎逻辑，所有工具类设计均支持无冲突组合。

🛠️ Implementation Example: The Modern Layout (2026)

🛠️ 实现示例：现代布局（2026）

Combining Container Queries, 3D Transforms, and

@theme

variables for a cutting-edge UI.

tsx

// 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>
  )
}

结合容器查询、3D变换与

@theme

变量打造前沿UI。

tsx

// 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>
  )
}

Table of Contents & Detailed Guides

目录与详细指南

1. Migration from v3 to v4 — CRITICAL

1. 从v3迁移至v4 — 至关重要

Automated upgrade tool (
```
npx @tailwindcss/upgrade
```
)
Manual migration: Removing
```
tailwind.config.js
```
PostCSS vs. Lightning CSS integration

自动升级工具（
```
npx @tailwindcss/upgrade
```
）
手动迁移：移除
```
tailwind.config.js
```
PostCSS与Lightning CSS集成对比

2. The @theme Block & Design Systems — CRITICAL

2. @theme块与设计系统 — 至关重要

Defining colors, fonts, and spacing tokens
Overriding vs. Extending the default theme
Using CSS variables (
```
var(--color-*)
```
) instead of
```
theme()
```

定义颜色、字体与间距标记
覆盖与扩展默认主题
使用CSS变量（
```
var(--color-*)
```
）替代
```
theme()
```

3. Advanced Layout & Container Queries — HIGH

3. 高级布局与容器查询 — 高优先级

Native Container Query variants (
```
@md:
```
,
```
@lg:
```
)
Complex Grid configurations with dynamic variables
3D Transforms and Perspective

原生容器查询变体（
```
@md:
```
、
```
@lg:
```
）
结合动态变量的复杂Grid配置
3D变换与透视效果

4. Custom Utilities & @utility — MEDIUM

4. 自定义工具类与@utility — 中优先级

The new
```
@utility
```
directive syntax
Handling functional/dynamic values in custom classes
Avoiding arbitrary values with local theme variables

全新
```
@utility
```
指令语法
在自定义类中处理函数式/动态值
通过本地主题变量避免任意值

Quick Reference: The "Do's" and "Don'ts"

快速参考：「应做」与「不应做」

Don't	Do
`tailwind.config.js`	`@theme { ... }` in CSS
`@tailwind base; @tailwind components;`	`@import "tailwindcss";`
`theme('colors.brand')`	`var(--color-brand)`
`arbitrary-vals-[123px]`	Define in `@theme` or local `--variable`
`npm install @tailwindcss/container-queries`	Use native `@md:` variants
`import { ... } from 'tailwind-merge'`	Trust the Oxide engine for composition

Optimized for Tailwind CSS 4.0+ and Lightning CSS. Updated: January 22, 2026 - 14:59

不应做	应做
`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