立即开始使用 Tailwind CSS

我已经使用 Tailwind CSS 四个月了，我可以自信地说它比普通 CSS 好得多。

如果您还不了解，Tailwind CSS 基本上提供了一些可用于设置 HTML 样式的实用类。您可以将其视为 Bootstrap，但拥有更大的自由度。Tailwind CSS 不会拘泥于某种设计，而是让您能够创建自己的设计。虽然它确实拥有一套设计系统，但与 Bootstrap 相比，它更加精简，同时节省了您像使用普通 CSS 那样从头开始创建设计系统的时间。

你可能会感到困惑，我来举个例子。要在 CSS 中为元素添加 4rem 的外边距，你可以这样做：

.element{
    margin-top: 4rem;
}

然后你的 HTML 看起来会像这样：

<div class="element">
    ...
</div>

但是，使用 Tailwind CSS，这些 CSS 行会被合并到 HTML 元素的类中，如下所示：

<div class="mt-16">
    ...
</div>

这里，mt-16代表margin-top: 4rem。

这就引出了我的第一点：创建一整套设计系统（包括间距和类）可能非常耗时且效率低下。Tailwind CSS 通过提供间距、颜色、响应式和基本动画类来替代实际的 CSS，从而解决了这个问题。

例如，对于旋转动画，您只需要类名animate-spin。其实现如下：

<div class="animate-spin">
    ...
</div>

现在你就有了一个旋转元素！

Tailwind 的颜色系统非常适合您不想创建配色方案的小型项目。

Tailwind 提供的颜色不仅仅是具有花哨名称的 CSS 颜色，它们更具吸引力。

这是 Tailwind 最鲜艳的蓝色：

这是 CSS 最鲜艳的蓝色：

值得注意的是，Tailwind 的颜色比基础 CSS 颜色更加舒缓，并且不那么刺眼。

Tailwind 还提供了许多其他类，可以减少你需要编写的样式数量。例如，像 这样的伪选择器hover:基本上可以精简为

<div class="hover:whatever-you-want-to-do-on-hover">
    ...
</div>

Tailwind 在响应式布局方面也有一些神奇之处。Tailwind 使用预设的（默认）像素值来设置某些断点。例如，有一个sm断点的屏幕宽度为 640px。如果您感到困惑，可以将这些断点视为 CSS 中的媒体查询。

要使用这些断点，只需使用breakpointName:。breakpointName是以下值之一：

假设您想div在较小的屏幕上隐藏响应式布局，并在大于 768px 的屏幕上将其显示为弹性布局。

<div class="hidden md:flex">
   ...
</div>

上面的 HTML 代码基本上是说“隐藏md断点以下的所有内容，md断点以上的所有内容都应显示为flex”。（在本例中，在普通 CSS 中flex为 = ）。display: flex;

Tailwind 还有很多自定义选项。只需跳转到tailwind.config.js，你就有大量选项可以自定义断点、其他颜色等等。

然而 Tailwind 也并非完美无缺。首先我们来看一下，应用这些样式之后，代码看起来有多么臃肿。

看看这个：

如果您想要四个按钮，则必须执行以下操作：

<button class="bg-blue rounded-md shadow-md px-2 py-1">
    ...
</button>

<button class="bg-blue rounded-md shadow-md px-2 py-1">
    ...
</button>

<button class="bg-blue rounded-md shadow-md px-2 py-1">
    ...
</button>

<button class="bg-blue rounded-md shadow-md px-2 py-1">
    ...
</button>

很重复吧？好吧，如果你使用支持创建组件的 JavaScript 框架，例如 React、Vue、Angular 和 Svelte（由于其简单性而受到很多开发人员的喜爱），就可以解决这个问题。

@apply另一种缩短类名的方法是在 Tailwind 需要应用样式的 CSS 文件中使用。更多关于应用概念的信息，请访问他们的网站。

同样的按钮类名可以缩写为

.button{
    @apply bg-blue rounded-md shadow-md px-2 py-1
}

您的按钮将如下所示：

<button class="button"> ... </button>

一段时间后，Tailwind 就会成为你的第二天性，你开始确切地知道该输入什么。如果你是 Tailwind 新手，这可能会很有挑战性，因为你觉得必须记住所有的类。不要强迫自己记住；这就像潜意识里知道了工作需要哪些类一样。一段时间后，你就会逐渐了解应该使用哪些实用程序以及何时使用它们。此外，如果你需要任何帮助，Tailwind 的网站随时可以为你提供帮助。

如果您有兴趣，请访问https://tailwindcss.com/docs/installation查看有关使用 NextJS 等框架甚至通过 HTML 设置 CDN 的文档。

关于 Tailwind 就这些！正如我之前所说，想要了解更多特定主题的帮助，例如 CSS 网格和其他实用工具，请访问网站。如果您喜欢这篇文章，文章左侧有三个按钮供您点击，还有一个评论区等待您的评论。如果您不喜欢这篇文章，这些按钮仍然开放，随时可以点击🙃。