Tailwind CSS 性能优化指南：v4 性能提升、JIT 编译与摇树优化

tailwindcss-performance by josiahsiegel/claude-plugin-marketplace

108 周安装量

23 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-performance

CSS 性能优化前端架构

🇨🇳中文介绍

Tailwind CSS 性能优化

v4 性能改进

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

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

JIT（即时）编译

JIT 工作原理

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

扫描源文件中的类名
仅生成您使用的 CSS
输出最小化、优化的结果

v4：始终启用 JIT

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

@import "tailwindcss";
/* JIT 是自动的 */

内容检测

自动检测（v4）

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

/* v4 - 自动工作 */
@import "tailwindcss";

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

显式指定内容（v4）

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

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

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

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

源文件：所有可能的工具类（约 15MB 以上）
↓
扫描：查找使用的类名
↓
输出：仅使用的样式（通常约 10-50KB）

# Vite - 自动为生产环境优化
npm run build

# PostCSS - 确保设置 NODE_ENV
NODE_ENV=production npx postcss input.css -o output.css

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

// 错误 - 类不会被生成
const color = 'blue'
className={`text-${color}-500`}  // ❌ 无法检测

const size = 'lg'
className={`text-${size}`}  // ❌ 无法检测

1. 使用完整类名

// 正确 - 完整类名
const colorClasses = {
  blue: 'text-blue-500',
  red: 'text-red-500',
  green: 'text-green-500',
}
className={colorClasses[color]}  // ✓ 可检测

2. 使用数据属性

// 正确 - 基于数据属性设置样式
<div data-color={color} className="data-[color=blue]:text-blue-500 data-[color=red]:text-red-500">

/* 在您的 v4 CSS 中 */
@source inline("text-blue-500 text-red-500 text-green-500");

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



<div class="text-[var(--color-dynamic)]">动态颜色</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">

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

<!-- 正确 - GPU 加速 -->
<div class="transform hover:scale-105 transition-transform">

<!-- 正确 - GPU 加速 -->
<div class="opacity-100 hover:opacity-80 transition-opacity">

<!-- 慢 - 可能导致重绘 -->
<div class="left-0 hover:left-4 transition-all">

优先使用原生变量

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

/* v3 - 使用 theme() 函数 */
.element {
  color: theme(colors.blue.500);
}

/* v4 - 使用 CSS 变量（更快） */
.element {
  color: var(--color-blue-500);
}

对于性能关键路径：

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

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

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

export default defineConfig({
  plugins: [tailwindcss()],
  build: {
    // 压缩 CSS
    cssMinify: 'lightningcss',
    // 优化代码块
    rollupOptions: {
      output: {
        manualChunks: {
          // 如有需要，分割供应商 CSS
        }
      }
    }
  }
})

使用 cssnano 的 PostCSS

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

1. 避免未使用的插件

/* 仅加载所需内容 */
@plugin "@tailwindcss/typography";
/* 不要加载未使用的插件 */

@theme {
  /* 禁用默认颜色 */
  --color-*: initial;

  /* 仅定义需要的颜色 */
  --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);
}

@theme {
  /* 移除未使用的断点 */
  --breakpoint-2xl: initial;

  /* 仅保留使用的断点 */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

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

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

- name: 构建
  run: npm run build

# 计时构建过程
time npm run build

# 详细输出
DEBUG=tailwindcss:* npm run build

# 安装分析器
npm install -D vite-bundle-analyzer

# 分析包
npm run build -- --analyze

# 检查输出 CSS 大小
ls -lh dist/assets/*.css

# Gzip 压缩后大小
gzip -c dist/assets/main.css | wc -c

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

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

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

对于非常大的应用，考虑代码分割 CSS：

// 动态导入路由的 CSS
const AdminPage = lazy(() =>
  import('./admin.css').then(() => import('./AdminPage'))
)

让 JIT 发挥作用 - 不要不必要地使用安全列表
使用完整类名 - 避免动态拼接
特定过渡效果 - 不要使用 transition-all
GPU 属性 - 优先使用 transform 和 opacity
最小化主题 - 仅定义使用的内容
生产构建 - 始终使用生产模式
测量 - 检查实际的 CSS 大小

2026 年 1 月 23 日

🇺🇸English

Tailwind CSS Performance Optimization

v4 Performance Improvements

Tailwind CSS v4 features a completely rewritten engine in Rust:

Metric	v3	v4
Full builds	Baseline	Up to 5x faster
Incremental builds	Milliseconds	Microseconds (100x+)
Engine	JavaScript	Rust

JIT (Just-In-Time) Compilation

How JIT Works

JIT generates styles on-demand as classes are discovered in your files:

Scans source files for class names
Generates only the CSS you use
Produces minimal, optimized output

v4: Always JIT

Unlike v3, JIT is always enabled in v4—no configuration needed:

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

Content Detection

Automatic Detection (v4)

v4 automatically detects template files—no content configuration required:

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

Explicit Content (v4)

If automatic detection fails, specify sources explicitly:

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

Excluding Paths

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

Tree Shaking

How It Works

Tailwind's build process removes unused CSS:

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

Production Build

# Vite - automatically optimized for production
npm run build

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

Dynamic Class Names

The Problem

Tailwind can't detect dynamically constructed class names:

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

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

Solutions

1. Use Complete Class Names

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

2. Use Data Attributes

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

3. Safelist Classes

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

4. CSS Variables

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



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

Optimizing Transitions

Use Specific Transitions

<!-- SLOW - Transitions all properties -->
<button class="transition-all duration-200">

<!-- FAST - Only transitions specific properties -->
<button class="transition-colors duration-200">
<button class="transition-transform duration-200">
<button class="transition-opacity duration-200">

GPU-Accelerated Properties

Prefer transform and opacity for smooth animations:

<!-- GOOD - GPU accelerated -->
<div class="transform hover:scale-105 transition-transform">

<!-- GOOD - GPU accelerated -->
<div class="opacity-100 hover:opacity-80 transition-opacity">

<!-- SLOW - May cause repaints -->
<div class="left-0 hover:left-4 transition-all">

CSS Variable Usage

Prefer Native Variables

In v4, use CSS variables directly instead of theme():

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

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

Static Theme Values

For performance-critical paths:

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

This inlines theme values instead of using CSS variables.

Build Optimization

Vite Configuration

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

PostCSS with cssnano

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

Reducing Bundle Size

1. Avoid Unused Plugins

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

2. Limit Color Palette

@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. Limit Breakpoints

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

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

Caching Strategies

Development

v4's incremental builds are already extremely fast
No additional caching needed in most cases

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

Measuring Performance

Build Time Analysis

# Time your build
time npm run build

# Verbose output
DEBUG=tailwindcss:* npm run build

Bundle Analysis

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

# Analyze bundle
npm run build -- --analyze

CSS Size Check

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

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

Performance Checklist

Development

JIT is working (styles update instantly)
No console warnings about large files
Hot reload is fast

Production

NODE_ENV=production is set
CSS is minified
Unused CSS is removed
No dynamic class name issues
CSS size is reasonable (<50KB typical)

Common Issues

Issue	Solution
Large CSS output	Check for dynamic classes, safelist issues
Slow builds	Ensure v4, check file globs
Missing styles	Check content detection, class names
Slow animations	Use GPU-accelerated properties

Lazy Loading CSS

For very large apps, consider code-splitting CSS:

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

Best Practices Summary

Let JIT do its work - Don't safelist unnecessarily
Use complete class names - Avoid dynamic concatenation
Specific transitions - Not transition-all
GPU properties - Prefer transform and opacity
Minimal theme - Only define what you use
Production builds - Always use production mode
Measure - Check your actual CSS size

Weekly Installs

Repository

josiahsiegel/cl…ketplace

GitHub Stars

First Seen

Jan 23, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode71

gemini-cli69

codex66

cursor64

github-copilot63

claude-code63

GSAP 框架集成指南：Vue、Svelte 等框架中 GSAP 动画最佳实践

3,200 周安装

Tailwind CSS 性能优化指南：v4 性能提升、JIT 编译与摇树优化

🇨🇳中文介绍

Tailwind CSS 性能优化

v4 性能改进

JIT（即时）编译

JIT 工作原理

v4：始终启用 JIT

内容检测

自动检测（v4）

相关 Skills

显式指定内容（v4）

排除路径

摇树优化

工作原理

生产构建

动态类名

问题

解决方案

1. 使用完整类名

2. 使用数据属性

3. 安全列表类

4. CSS 变量

优化过渡效果

使用特定过渡

GPU 加速属性

CSS 变量使用

优先使用原生变量

静态主题值

构建优化

Vite 配置