📦 Tailwind Optimizer — Tailwind 优化器

Tailwind 优化器 通过检测未使用的实用程序、识别提取机会、审计响应式设计一致性和减少 CSS 包大小来优化 Tailwind CSS 的使用。 分析配置、类使用模式和设计系统的遵守情况。 使用方法 "优化我的 Tailwind CSS 设置" "查找未使用的 Tailwind 类" "审计响应式设计覆盖范围" "检查我的 Tailwind 配置是否有问题" 工作原理

• 配置审计

cat tailwind.config.js 2>/dev/null || cat tailwind.config.ts 2>/dev/null cat postcss.config.js 2>/dev/null 检查： 内容路径是否覆盖所有模板文件 主题扩展与覆盖（更喜欢扩展） 未使用的插件是否已加载 自定义颜色/间距的一致性 暗黑模式策略（类 vs 媒体） 是否为嵌入现有 CSS 配置了前缀

• 类使用分析

# 最常用的实用程序 grep -roh 'class[Name]="[^"]"\|className={[^}]}' src/ | sort | uniq -c | sort -rn | head -20 # 查找长类字符串（提取候选项） grep -rn 'class[Name]="[^"]"' src/ | awk -F'"' '{print NF-1, length($2), $0}' | sort -rn | head -10 检测： 只使用一次的类（潜在死代码） 重复的类组合（提取到 @apply 或组件） 冲突的实用程序（例如 text-red-500 text-blue-500） 应该在主题配置中但使用了任意值 !important 覆盖，指示特异性问题

• 设计系统遵守

使用主题值 vs 任意值（w-[137px] vs w-36） 一致的间距比例使用 颜色调色板遵守（无非品牌颜色） 字体比例一致性 边框半径一致性

• 响应式设计

移动优先方法（基本样式用于移动，md：用于桌面） 布局组件缺少断点 页面间不一致的响应式模式 应该使用 sr-only 进行无障碍访问的隐藏元素 容器宽度和填充一致性

• 包优化

Purge/content 配置捕获所有文件 JIT 模式启用（v3+ 默认） 不必要的变体启用 大型自定义插件添加未使用的 CSS 组件库类未树抖

• 提取推荐

当类组合出现 3+ 次时： / 之前：在 5 个组件中重复 / / 之后：提取 / @layer components { .btn-primary { @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium; } } 输出 ## Tailwind CSS 优化报告 版本： Tailwind 4.0 | 唯一类： 847 CSS 输出： 34KB（压缩：8KB） ### 改进（5） 1. 12 个提取候选项 — 重复的类组合（3+ 次） 顶部：flex items-center gap-2（23 次）→ 提取到 .flex-row-center 2. 34 个任意值 可以使用主题令牌 text-[#1a1a1a] → text-gray-900（已经在调色板中） 3. 8 个布局组件缺少响应式 — 仅桌面布局 4. 3 个冲突的实用程序 — p-4 px-6（px 覆盖 p 的水平） 5. 内容配置缺少 .mdx 文件（MDX 页面未样式） ### 良好实践 - JIT 模式与正确的内容路径 - 一致的主题间距比例使用 - 暗黑模式通过类策略（允许用户首选项） - CSS 输出很小（8KB 压缩）