Tailwind CSS 实战：从入门到精通

为什么选择 Tailwind CSS

Tailwind CSS 是一个功能类优先的 CSS 框架，它提供了大量低级别的工具类，让你无需离开 HTML 就能构建自定义设计。

优势

• 开发速度快：不需要在 HTML 和 CSS 文件之间切换
• 一致性：设计令牌确保视觉一致性
• 可维护性：修改样式不会影响其他组件
• 体积小：PurgeCSS 自动移除未使用的样式

核心概念

响应式设计

Tailwind 采用移动优先的响应式设计：

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

状态变体

使用状态变体处理交互状态：

<button class="bg-blue-500 hover:bg-blue-700 active:bg-blue-900">
  点击我
</button>

暗色模式

Tailwind 支持两种暗色模式策略：

1. media：跟随系统偏好
2. class：手动切换

自定义配置

通过 tailwind.config.ts 扩展默认主题：

export default {
  theme: {
    extend: {
      colors: {
        primary: '#18181b',
        secondary: '#f4f4f5',
      },
      fontFamily: {
        sans: ['var(--font-sans)'],
      },
    },
  },
}

总结

Tailwind CSS 是现代前端开发的利器，掌握它能显著提升你的开发效率和代码质量。