Tailwind CSS 实战：原子化 CSS 框架速成

什么是 Tailwind？

Tailwind 是实用优先的 CSS 框架，提供低阶工具类直接构建设计。

基础用法

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  点击我
</button>

响应式设计

<div class="text-center md:text-left lg:text-right">
  响应式文本对齐
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  响应式网格
</div>

常用工具类

<!-- 间距 -->
<div class="m-4 p-2 space-x-2"></div>

<!-- 布局 -->
<div class="flex items-center justify-between"></div>
<div class="grid gap-4"></div>

<!-- 尺寸 -->
<div class="w-full h-screen max-w-md"></div>

<!-- 颜色 -->
<div class="text-gray-700 bg-white"></div>

自定义配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#1DA1F2"
      }
    }
  }
}

优势

• 无需命名类
• 设计一致
• 生产体积小
• 响应式简单

Tailwind 让 CSS 编写更高效！