Tailwind CSS
tailwindcss.com直接在标记中组合工具类的 CSS 框架，适合快速建立统一的间距、颜色和响应式规则。
官方首页截图
打开官网
Tool profile
Tailwind CSS 是什么?
Tailwind CSS 把常见 CSS 属性整理成可组合的工具类，并通过配置生成项目实际使用的样式。它不替你决定视觉风格，却能让组件之间的尺寸和状态更容易保持一致。
Tailwind CSS 能做什么?
01
适合谁
需要快速交付界面、且愿意用设计令牌约束细节的产品开发者
02
解决什么问题
减少反复命名 CSS 类和维护大型样式文件的成本
03
价格与成本
价格、免费额度和政策会变化；采购前请以官网当前的计划、用量限制和地区政策为准。
04
推荐使用场景
SaaS 后台、营销页迭代、组件库原型
05
主要替代品
panda-css、css-modules
06
选型判断
把 Tailwind 当作执行设计系统的方式，而不是设计系统本身。
使用场景
“SaaS 后台：需要快速交付界面、且愿意用设计令牌约束细节的产品开发者，重点是减少反复命名 CSS 类和维护大型样式文件的成本。
“营销页迭代：需要快速交付界面、且愿意用设计令牌约束细节的产品开发者，重点是减少反复命名 CSS 类和维护大型样式文件的成本。
“组件库原型：需要快速交付界面、且愿意用设计令牌约束细节的产品开发者，重点是减少反复命名 CSS 类和维护大型样式文件的成本。
需要注意
工具类堆叠并不会自动产生好设计；缺少颜色、间距和组件规范时，代码仍然会失控。
把 Tailwind 当作执行设计系统的方式，而不是设计系统本身。