Tailwind CSS
CSS 工具Tailwind CSS 是通过组合工具类名来编写网页样式的 CSS 框架例如，p-6、rounded-xl 和 border 分别控制留白、圆角和边框。类名很长时可按留白、文字、边框和布局分组阅读，重复组合应收进组件。
也常被叫作Tailwind
开始前
见过网页中的卡片、留白和边框。
看完后
能看懂几条 Tailwind 类名分别在改变卡片的留白、圆角和边框。
一串类名，怎样变成卡片外观？
<article class="">
✓ padding: 24px○ border-radius: 12px○ border: 1px solid
产品更新新版本已经上线
点上面的类名，观察这张卡片哪一处改变。
刚才发生了什么
- 1每个类名管一小处
p-6 管内侧留白，rounded-xl 管圆角，border 管边框。
- 2组合后才像卡片
这些类名同时写在同一个元素上，浏览器就把对应规则合在一起绘制。
- 3仍然是 CSS
Tailwind 帮你快速写规则，但布局挤在一起时，原因还是原来的 CSS 规则。
看到很长的一串类名时，先按“留白、文字、边框、布局”分组读；重复出现的整串样式应收进组件。
接下来学什么
延伸阅读 · 权威出处