Tailwind CSS 实用技巧与最佳实践

自定义设计令牌

在 tailwind.config.mjs 中定义项目专属的设计令牌：

theme: {
  extend: {
    colors: {
      primary: { /* 色阶 */ },
      surface: { /* 色阶 */ },
    },
  },
},

常用技巧

1. 使用 @apply 抽取公共样式

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

2. 响应式设计

Tailwind 的断点是移动优先的：

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

3. 暗色模式

使用 dark: 前缀轻松实现暗色模式：

<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-white">自适应内容</p>
</div>

性能优化

• 确保 content 配置正确，避免生成未使用的 CSS
• 使用 JIT 模式按需生成样式
• 构建时自动 tree-shake

总结

Tailwind CSS 让样式开发更高效，通过合理使用自定义配置和工具类，可以快速构建出一致且美观的界面。