tailwindcss-performance

Tailwind CSS 性能优化

v4 性能提升

Tailwind CSS v4 使用 Rust 完全重写了引擎：

指标	v3	v4
完整构建	基准	最快提升 5 倍
增量构建	毫秒级	微秒级（100 倍以上）
引擎	JavaScript	Rust

JIT（即时）编译

JIT 的工作原理

JIT 会在文件中发现类名时按需生成样式：

1. 扫描源文件中的类名
2. 只生成你使用的 CSS
3. 输出精简、优化后的内容

v4：始终启用 JIT

与 v3 不同，v4 中始终启用 JIT，无需配置：

@import "tailwindcss";
/* JIT is automatic */

内容检测

自动检测（v4）

v4 会自动检测模板文件，无需配置内容：

/* v4 - Works automatically */
@import "tailwindcss";

显式指定内容（v4）

如果自动检测失败，请显式指定源：

@import "tailwindcss";
@source "./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}";
@source "./components/**/*.{js,jsx,ts,tsx}";

排除路径

@source not "./src/legacy/**";

摇树优化

工作原理

Tailwind 的构建流程会移除未使用的 CSS：

Source: All possible utilities (~15MB+)
↓
Scan: Find used class names
↓
Output: Only used styles (~10-50KB typical)

生产构建

# Vite - automatically optimized for production
npm run build

# PostCSS - ensure NODE_ENV is set
NODE_ENV=production npx postcss input.css -o output.css

动态类名

问题

Tailwind 无法检测动态构造的类名：

// BAD - Classes won't be generated
const color = 'blue'
className={`text-${color}-500`}  // ❌ Not detected

const size = 'lg'
className={`text-${size}`}  // ❌ Not detected

解决方案

1. 使用完整类名

// GOOD - Full class names
const colorClasses = {
  blue: 'text-blue-500',
  red: 'text-red-500',
  green: 'text-green-500',
}
className={colorClasses[color]}  // ✓ Detected

2. 使用数据属性

// GOOD - Style based on data attributes
<div data-color={color} className="data-[color=blue]:text-blue-500 data-[color=red]:text-red-500">

3. 将类名加入安全列表

/* In your CSS for v4 */
@source inline("text-blue-500 text-red-500 text-green-500");

4. CSS 变量

@theme {
  --color-dynamic: oklch(0.6 0.2 250);
}

<div class="text-[var(--color-dynamic)]">Dynamic color</div>

优化过渡效果

使用特定过渡效果

<button class="transition-all duration-200">


<button class="transition-colors duration-200">
<button class="transition-transform duration-200">
<button class="transition-opacity duration-200">

GPU 加速属性

为实现流畅动画，优先使用 transform 和 opacity：

<div class="transform hover:scale-105 transition-transform">


<div class="opacity-100 hover:opacity-80 transition-opacity">


<div class="left-0 hover:left-4 transition-all">

CSS 变量的使用

优先使用原生变量

在 v4 中，直接使用 CSS 变量，而不是 theme()：

/* v3 - Uses theme() function */
.element {
  color: theme(colors.blue.500);
}

/* v4 - Use CSS variables (faster) */
.element {
  color: var(--color-blue-500);
}

静态主题值

对于性能关键路径：

@import "tailwindcss/theme.css" theme(static);

这会将主题值内联，而不是使用 CSS 变量。

构建优化

Vite 配置

// vite.config.js
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tailwindcss()],
  build: {
    // Minify CSS
    cssMinify: 'lightningcss',
    // Optimize chunks
    rollupOptions: {
      output: {
        manualChunks: {
          // Split vendor CSS if needed
        }
      }
    }
  }
})

使用 cssnano 的 PostCSS

// postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {},
    cssnano: process.env.NODE_ENV === 'production' ? {} : false
  }
}

减小包体积

1. 避免使用未用到的插件

/* Only load what you need */
@plugin "@tailwindcss/typography";
/* Don't load unused plugins */

2. 限制调色板

@theme {
  /* Disable default colors */
  --color-*: initial;

  /* Define only needed colors */
  --color-primary: oklch(0.6 0.2 250);
  --color-secondary: oklch(0.7 0.15 180);
  --color-gray-100: oklch(0.95 0 0);
  --color-gray-900: oklch(0.15 0 0);
}

3. 限制断点

@theme {
  /* Remove unused breakpoints */
  --breakpoint-2xl: initial;

  /* Keep only what you use */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

缓存策略

开发环境

• v4 的增量构建已经非常快
• 大多数情况下无需额外缓存

CI/CD

# GitHub Actions example
- name: Cache node_modules
  uses: actions/cache@v4
  with:
    path: node_modules
    key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}

- name: Build
  run: npm run build

衡量性能

构建时间分析

# Time your build
time npm run build

# Verbose output
DEBUG=tailwindcss:* npm run build

包分析

# Install analyzer
npm install -D vite-bundle-analyzer

# Analyze bundle
npm run build -- --analyze

CSS 大小检查

# Check output CSS size
ls -lh dist/assets/*.css

# Gzipped size
gzip -c dist/assets/main.css | wc -c

性能检查清单

开发环境

• JIT 正常工作（样式会即时更新）
• 控制台没有关于大文件的警告
• 热重载速度快

生产环境

• 已设置 NODE_ENV=production
• CSS 已压缩
• 未使用的 CSS 已移除
• 没有动态类名问题
• CSS 大小合理（通常小于 50KB）

常见问题

问题	解决方案
CSS 输出过大	检查动态类名和安全列表问题
构建缓慢	确认使用 v4，检查文件 glob
样式缺失	检查内容检测和类名
动画缓慢	使用 GPU 加速属性

CSS 懒加载

对于非常大型的应用，可以考虑对 CSS 进行代码拆分：

// Dynamically import CSS for routes
const AdminPage = lazy(() =>
  import('./admin.css').then(() => import('./AdminPage'))
)

最佳实践总结

1. 让 JIT 发挥作用 - 不要不必要地将类名加入安全列表
2. 使用完整类名 - 避免动态拼接
3. 使用特定过渡效果 - 不要使用 transition-all
4. 使用 GPU 属性 - 优先使用 transform 和 opacity
5. 保持主题精简 - 只定义实际使用的内容
6. 使用生产构建 - 始终使用生产模式
7. 衡量性能 - 检查实际 CSS 大小