2025-10-04 11:24:06
by admin>游戏攻略

廖雪峰

资深软件开发工程师，业余马拉松选手。

Tailwind CSS是一个与Bootstrap、Element等不同的CSS框架，它没有类似btn这样的组件样式，而是基于Utility构建的一套CSS。

Tailwind CSS的理念是提供一套完整的，最小单位的工具类CSS，再由设计师将它们组合起来。

例如，p-4表示padding:1rem，bg-white表示background-color:#fff，flex表示display:flex。总之，从CSS类名可以非常直观地映射到一个具体的定义。

而要构造出一个自定义样式的按钮，则需要组合使用多个Tailwind CSS提供的Utility CSS，例如：

class="px-4 py-2 m-4 text-bold bg-slate-200 border border-slate-300"

>Submit

乍一看这样写不如Bootstrap的

或者，根据深色模式自动调整颜色，仅需加上dark:修饰：

class="bg-slate-200 hover:bg-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700"

>Submit

Tailwind CSS提供的命令行工具会自动根据hover:、dark:等前缀生成对应的CSS样式，这种写法比SASS和LESS还要简单。

如果页面有很多Button，需要统一样式，难道需要在每个Button的class中重复一大串样式名吗？

为了复用一组样式，Tailwind提供了一种简单的自定义样式的方式，例如，把上述样式简化为btn-submit：

仅需用@apply指令告诉Tailwind CSS：

.btn-submit {

@apply bg-slate-200 hover:bg-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700;

}

实际上，使用Tailwind CSS，几乎不会用到手写原始的Style：

.foo {

width: 123px;

}

因为即使是width: 123px这样的样式，也可以用w-[123px]表示：

...

Tailwind CSS负责将w-[123px]转换为width: 123px。

理解了Tailwind CSS的设计理念，以及如何组合并自定义样式，可以非常快速地定义出符合设计的样式。甚至在浏览器打开开发者工具，查看Bootstrap的Button，可以用Tailwind CSS快速复刻出相同样式的Button。

和Bootstrap这类直接提供组件的CSS框架相比，Tailwind CSS介于组件和原始CSS之间，它适合需要自定义CSS、希望能有自己风格的网站。越来越多的前端框架如Next.js都推荐使用Tailwind CSS，Tailwind CSS有望成为最流行的CSS框架。