用途:优化 Tailwind CSS 生产环境表现,减小打包体积、加快加载速度。
主要能力:讲解 JIT 模式(Tailwind 3.0 起默认,按需生成样式、构建快、默认启用全部变体、支持任意值);内容路径 content 配置;动态类名用 safelist;避免字符串拼接类名;减少自定义 CSS、用 @apply 或组件抽象;启用 CSS 压缩,并通过 cssnano、Vite 的 cssMinify、Next.js optimizeCss、Webpack 的 CssMinimizerPlugin 等优化构建。还涉及代码分割、关键 CSS 内联、按需懒加载样式、字体优化(font-display: swap)、CSS 变量换主题,以及用命令行和 webpack-bundle-analyzer 分析体积、Lighthouse 指标与性能检查清单。
使用方式:在 tailwind.config.js 中指定 content 路径并配置 safelist;示例命令包括 npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify、ls -lh dist/output.css。生产构建脚本示例:"build:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify"。
适用场景:面向需要在生产环境压缩和优化 Tailwind CSS 的前端项目。
限制与注意:避免生产环境使用 CDN(约 3.5MB+)或 CDN 脚本;内容路径不要过宽以免扫描 node_modules;动态类名应使用 safelist;不要在生产禁用 purge,也不要过度使用 @apply。资料未提供具体收费、价格或平台信息。