---

第一次看到一串很长的 Tailwind class 时，很多人都会皱眉：这是不是把样式又塞回 HTML 了？这门课不回避这个问题，而是从真实组件出发，带你看清工具类到底把复杂度放到了哪里、又省掉了哪些来回跳转和重复决策。

你会使用 Tailwind CSS v4，从第一次安装开始，逐步完成能响应不同屏幕、状态和主题的真实界面。课程不会把工具类当成词典来背；每个概念都回到“这段界面为什么这样长、改动会影响哪里、什么时候不该这么用”这些更实际的问题。

你会完成什么

• 理解 utility-first 与传统 CSS、内联样式之间真正的差别，能判断 class 很多时该如何组织。
• 用稳定的间距、色彩、排版与状态变体搭出响应式界面，并处理动态类名、暗色模式和焦点反馈。
• 用 @theme、设计 token 和 @utility 把品牌规则收进可维护的主题系统。
• 通过 Flex、Grid、容器查询、表单状态与组件边界，完成一个可继续扩展的课程工作台。
• 掌握 v4 的源码检测、@source、复杂变体、现代渐变和渐进迁移，并知道它们的适用边界。

课程怎么走

课程从 class soup 的第一印象和 v4 安装开始，随后进入工具类语法与状态响应；接着把零散视觉决定收进主题；再用同一个工作台练布局和组件；最后讨论 v4 的高级能力、性能、兼容与迁移。每章配有中文图解和可操作的交互实验，目标是让你能把 Tailwind 用在真实项目里，而不是只记住一串类名。