Tailwind CSS

你可能会说

调个样式还要专门开 CSS 文件，能不能在写结构的地方顺手就调了？

Tailwind CSS 是用一组现成短代码直接写网页外观的工具。例如 p-6、rounded-xl 和 border 分别表示留白、圆角和边框。短代码很多时，可按留白、文字、边框和布局分组阅读；重复组合应收进同一个可复用界面部分。

先知道

也常被叫作Tailwind

一串类名，怎样变成卡片外观？

✓ padding: 24px○ border-radius: 12px○ border: 1px solid

产品更新新版本已经上线

点上面的类名，观察这张卡片哪一处改变。

选择题选择一个你认为最合适的答案

给卡片加入一段更长的说明后，文字显得拥挤，离卡片边缘很近。应该先改哪类 Tailwind 类名？

控制内边距的 p-* 类名控制外边距的 m-* 类名控制圆角的 rounded-* 类名

请只调整这张卡片的 Tailwind 类名，让内容有足够的内边距，同时保留现有圆角和边框。不要改其他组件。改完后分别看桌面和手机尺寸，并告诉我增加或删除了哪些类名。

推荐工具

点选按钮、文字或卡片，写下“圆角小一点”，再把准确位置和页面信息一起复制给 AI。