Tailwind CSS 最佳实践

Tailwind CSS 是一个实用优先的 CSS 框架，本文总结了一些实用的技巧。

常用工具类

布局

<!-- Flexbox 居中 --><div class="flex items-center justify-center">  <!-- 内容 --></div> <!-- Grid 布局 --><div class="grid grid-cols-3 gap-4">  <!-- 三个等宽列 --></div>

响应式设计

Tailwind 提供了五个断点：

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

<div class="text-sm md:text-base lg:text-lg">  响应式字体大小</div>

深色模式

<div class="bg-white dark:bg-gray-900">  <!-- 自动适配深色模式 --></div>

组件复用

使用 @apply 指令提取重复样式：

@layer components {  .btn-primary {    @apply px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors;  }}

性能优化

生产构建

生产环境会自动移除未使用的样式：

npm run build

配置优化

// tailwind.config.jsmodule.exports = {  content: ['./src/**/*.{js,ts,jsx,tsx}'],  // ...}

总结

Tailwind CSS 让样式开发更高效，但需要注意：

• 避免过度使用内联样式
• 适当提取组件样式
• 注意性能优化