CSS

Tailwind CSS性能优化 Tailwind CSS通过JIT编译器和PurgeCSS提供了出色的性能优化能力。本文将详细介绍各种优化策略。 JIT模式优化 启用JIT模式 1 2 3 4 5 6 7 8 9 10 11 12 // tailwind.config.js module.exports = { mode: 'jit', content: [ './src/**/*.{html,js,jsx,ts,tsx,vue}', './public/**/*.html' ], theme: { extend: {} }, plugins: [] } JIT模式优势 按需生成 - 只生成使用的类 任意值支持 - 可以使用动态值 更快的构建 - 编译速度提升 更小的CSS - 最终CSS体积更小 PurgeCSS配置 内容路径配置 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // tailwind.config.js module.exports = { content: [ // 精确指定内容路径 './src/components/**/*.{vue,js}', './src/pages/**/*.{vue,js}', './src/layouts/**/*.{vue,js}', // 包括动态导入的文件 './src/**/*.vue', // 第三方库 './node_modules/@mycompany/ui-library/**/*.{js,jsx}' ], safelist: [ // 保留动态类名 { pattern: /bg-(red|blue|green)-500/, variants: ['hover', 'focus'] } ] } 安全列表策略 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // tailwind.config.js module.exports = { safelist: [ // 精确匹配 'bg-blue-500', 'text-center', // 正则模式 /^bg-/, /^text-/, /p-[0-9]+/, // 变体 { pattern: /bg-(red|blue|green)-500/, variants: ['hover', 'focus', 'active'] } ] } 动态类名处理 避免字符串拼接 1 2 3 4 5 6 7 8 9 <!-- ❌ 错误做法 --> <div :class="`text-${color}-500`"></div> <!-- ✅ 正确做法 --> <div :class="{ 'text-red-500': color === 'red', 'text-blue-500': color === 'blue', 'text-green-500': color === 'green' }"></div> 使用完整类名 1 2 3 4 5 6 7 8 9 10 11 <script setup> const sizes = { sm: 'text-sm px-2 py-1', md: 'text-md px-4 py-2', lg: 'text-lg px-6 py-3' } </script> <template> <button :class="sizes[size]">Click me</button> </template> CSS体积优化 禁用未使用的核心插件 1 2 3 4 5 6 7 8 9 10 // tailwind.config.js module.exports = { corePlugins: { // 禁用不需要的插件 float: false, objectFit: false, objectPosition: false, userSelect: false } } 自定义断点 1 2 3 4 5 6 7 8 9 10 11 12 // tailwind.config.js module.exports = { theme: { screens: { // 只使用需要的断点 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px' } } } 运行时优化 懒加载组件 1 2 3 4 5 6 7 8 9 10 11 12 13 <script setup> import { defineAsyncComponent } from 'vue' const HeavyComponent = defineAsyncComponent(() => import('./HeavyComponent.vue') ) </script> <template> <Suspense> <component :is="HeavyComponent" /> </Suspense> </template> CSS提取 1 2 3 4 5 6 7 // vite.config.js export default { build: { cssCodeSplit: true, cssMinify: 'lightningcss' } } 性能分析 CSS体积分析 1 2 3 4 5 6 7 8 # 分析CSS体积 npx tailwindcss --help # 查看生成的CSS npx tailwindcss -i ./src/styles.css -o ./dist/output.css # 分析结果 npx tailwindcss -o build.css --minify 使用PurgeCSS分析 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // tailwind.config.js module.exports = { content: ['./src/**/*.{html,js}'], purge: { enabled: true, layers: ['components', 'utilities'], options: { // 生成分析报告 keyframes: true, fontFace: true, variables: true } } } 实用技巧 1. 使用@apply 1 2 3 4 5 6 7 8 9 10 /* 对于复杂的组件样式 */ @layer components { .card { @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow; } .btn-primary { @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded; } } 2. 主题定制 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // tailwind.config.js module.exports = { theme: { extend: { colors: { // 自定义颜色 primary: { 50: '#f0f9ff', 100: '#e0f2fe', 500: '#0ea5e9', 900: '#0c4a6e' } }, spacing: { // 自定义间距 '128': '32rem', '144': '36rem' } } } } 3. 响应式设计 1 2 3 4 5 6 7 8 9 10 <template> <!-- 响应式类名 --> <div class=" text-sm md:text-base lg:text-lg p-2 md:p-4 lg:p-6 bg-white md:bg-gray-100 lg:bg-gray-200 "> Responsive content </div> </template> 最佳实践 按需引入 - 只使用需要的类 避免内联样式 - 使用Tailwind类 组件化 - 为复杂组件创建@apply规则 定期清理 - 使用PurgeCSS清理未使用的类 性能监控 - 监控CSS体积和加载时间 总结 Tailwind CSS提供了多种优化策略。通过合理配置JIT模式、PurgeCSS和动态类名处理，可以构建高性能的CSS应用。 ...