Tailwind CSS 高级技巧

Tailwind CSS 不仅仅是一个 CSS 框架，它是一套完整的设计系统。

## 自定义主题

### 配置颜色
``javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a',
}
}
}
}
}
`

### 自定义组件
`css
@layer components {
.btn-primary {
@apply bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition-colors;
}
}
`

## 响应式设计

### 断点使用
`html

`

### 移动优先
`html

``

## 实用技巧

1. 使用 @apply：将常用样式组合成组件类
2. JIT 模式：利用 Just-in-Time 编译的优势
3. 插件系统：扩展 Tailwind 的功能
4. 性能优化：合理使用 purge 选项

## 总结

掌握这些高级技巧将帮助你更好地使用 Tailwind CSS 构建现代化的用户界面。