CSS —— Tailwind CSS 原子化设计理念

Tailwind CSS 的核心思想是"Utility-First"，通过原子化的 CSS 类名实现快速开发。

重点难点：

1. 响应式设计：sm:、md:、lg: 等前缀的使用规则
2. 伪类和伪元素：hover:、focus:、active: 等状态控制
3. 自定义配置：theme 和 plugin 的扩展方式

<!-- 响应式设计示例 --><divclass="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"><!-- hover 和 focus 状态 --><buttonclass="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">按钮</button><!-- 暗色模式支持 --><divclass="bg-white dark:bg-gray-800 text-black dark:text-white">暗色模式适配内容</div></div>