Tailwind CSS
你可能会说
调个样式还要专门开 CSS 文件，能不能在写结构的地方顺手就调了？
Tailwind CSS 是用一组现成短代码直接写网页外观的工具。例如
p-6、rounded-xl 和 border 分别表示留白、圆角和边框。短代码很多时，可按留白、文字、边框和布局分组阅读；重复组合应收进同一个可复用界面部分。也常被叫作Tailwind
一串类名，怎样变成卡片外观？
<article class="">
✓ padding: 24px○ border-radius: 12px○ border: 1px solid
产品更新新版本已经上线
点上面的类名，观察这张卡片哪一处改变。
类名怎样变成页面样式
直接对应 CSS 属性：每个工具类名就像一句微型指令，直接控制留白、排版等单一属性。例如 p-4 对应内边距 1rem，text-lg 对应较大的字号。
响应式前缀控制断点：通过添加 md:、lg: 或 sm: 前缀，可以指定样式在哪些屏幕尺寸下生效，从而在 HTML 里直接完成响应式设计。
状态变体控制交互：使用 hover:、focus: 或 dark: 变体，可以让元素在特定交互或主题下改变外观，无需写复杂的选择器。
你可以这样告诉 AI Agent
请只调整这张卡片的 Tailwind 类名，让内容有足够的内边距，同时保留现有圆角和边框。不要改其他组件。改完后分别看桌面和手机尺寸，并告诉我增加或删除了哪些类名。
接下来学什么
延伸阅读 · 权威出处
快速练习