Tailwind CSS：高效定制化界面设计.pdfVIP

六、TailwindCSS｜end▁

of▁sentence｜

Tailwind

CSS

是一个通过组合现成的工具类来快速构建定制化界面

的

CSS

框架，让你不用写传统

CSS

就能实现专业设计，就像用乐高

积木拼装页面一样简单高效。｜end▁of▁sentence｜

6.1

概念｜

end▁of▁

sentence｜

1.

特点｜end▁of▁sentence｜

原子类(Atomic

CSS)是一种

CSS

设计思想，它的概念是：每个

CSS类名只做一件事。在传统

CSS

里，你可能会写：｜end▁

of▁sentence｜

.button

{

background‑color:

blue;

color:

white;

padding:

10px

20px;

border‑radius:

5px;

}

然后在

HTML

里使用:｜end▁of▁

sentence｜

＜button

class=button＞点击我＜/button＞但在

Tailwind

CSS

里,你不需要定义.button

类,而是直接在

HTML

中用原子类拼装:

｜end▁of▁sentence｜

＜button

class=bg‑blue‑500

text‑white

px‑4

py‑2

rounded

＞点击我＜/but