Tailwind CSS
这门课从“class 太多是不是倒退”这个真实疑问出发，带你用 Tailwind CSS v4 把设计刻度、响应式布局、状态交互、主题变量和组件边界组织成一套可维护的界面工作流。你会通过真实 CSS/JSX 示例、中文图解和交互实验完成从安装到高级变体的练习，并学会判断工具类、设计 token、普通 CSS 与组件封装各自适合解决什么问题。
第一次看到一串很长的 Tailwind class 时，很多人都会皱眉：这是不是把样式又塞回 HTML 了？这门课不回避这个问题，而是从真实组件出发，带你看清工具类到底把复杂度放到了哪里、又省掉了哪些来回跳转和重复决策。
你会使用 Tailwind CSS v4，从第一次安装开始，逐步完成能响应不同屏幕、状态和主题的真实界面。课程不会把工具类当成词典来背；每个概念都回到“这段界面为什么这样长、改动会影响哪里、什么时候不该这么用”这些更实际的问题。
- 理解 utility-first 与传统 CSS、内联样式之间真正的差别，能判断 class 很多时该如何组织。
- 用稳定的间距、色彩、排版与状态变体搭出响应式界面，并处理动态类名、暗色模式和焦点反馈。
- 用 @theme、设计 token 和 @utility 把品牌规则收进可维护的主题系统。
- 通过 Flex、Grid、容器查询、表单状态与组件边界，完成一个可继续扩展的课程工作台。
- 掌握 v4 的源码检测、@source、复杂变体、现代渐变和渐进迁移，并知道它们的适用边界。
课程从 class soup 的第一印象和 v4 安装开始，随后进入工具类语法与状态响应；接着把零散视觉决定收进主题；再用同一个工作台练布局和组件；最后讨论 v4 的高级能力、性能、兼容与迁移。每章配有中文图解和可操作的交互实验，目标是让你能把 Tailwind 用在真实项目里，而不是只记住一串类名。