翻译自：https://scotch.io/tutorials/get-started-with-tailwind-css-in-15-minutes

Tailwind CSS 是一个 CSS 框架，它由大量的功能类组成，而不是编写好的组件。

使用 Tailwind，后，我发现最让我欣喜的一件事：

再也不用重写 CSS 样式类了

 

在 Tailwind 的首页上，有一个很酷的例子，用来展示 Tailwind 如何工作。

真实案例

本文聚焦在介绍 Tailwind 的一些特性。如果你想直接看一些案例，可以在下面这些文章中找到：

• Recreate the Spotify Album Page
• Recreate Google.com Home Page
• Recreate Twitter Creation Modal

一个简单的例子 - 构建一个卡片

这是一个 Bootstrap 构建的卡片组件与 Tailwind 构建的卡片组件对比。警告：这看起来有些奇怪，你可能会在看完这个例子后，失去了解 Tailwind 的兴趣。给它一些时间，多看一些练习示例，你会看到使用组合 Utils 类的强大功能，以及组合优于继承的思想。

A ### Bootstrap card：

<div class="card" style="width: 18rem;">
  <div class="card-body">

        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Content goes here</p>

    </div>
</div>

Bootstrap 版的 Card 很容易就被实现了，它的可定制性很差。你需要使用!important 关键字 来覆盖相关 class 才能实现。

 

让我们看一下 Tailwind 版本的实现：

<div class="bg-white rounded shadow border p-6 w-64">
  <h5 class="text-3xl font-bold mb-4 mt-0">My Title</h5>
  <p class="text-gray-700 text-sm">Content goes here</p>
</div>

我们使用使用组合 Utils 的方式，实现了一个卡片。这看起来比上面的版本复杂了一些，然而这个版本的最大收益是具有极强的可定制性，快速而简单。

 

这是代码的 CodePen。下面是关于这个卡片中类的解析：

• bg-white: background: #fff
• rounded: border-radius: 0.25rem
• shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
• border: border-width: 1px
• p-6: padding: 1.5rem
• w-64: width: 16rem

这是有关标题的一些 class：

• text-3xl: font-size: 1.875rem
• font-bold: font-weight: 700
• mb-4: margin-bottom: .75rem
• mt-0: margin-top: 0

这是有关内容的一些 class：

• text-gray-700: color: #4a5568
• text-sm: font-size: .875rem

Tailwind CSS 是一项投资。如果你想快速的编写 CSS 和设计你的 app，你要花时间去学习这些 class；与学习其他技术一样，你将从中获得收益。

会不会让 HTML 变得负担重？

可以将使用 Tailwind 看作是编写内联样式。有许多策略可以将这些类移出你的 HTML，并让其可复用。下面介绍一下清理 Tailwind 类的策略：

• 使用 Sass 以及将我们的类移出 HTML
• 使用 JS 组件（React/Vue），以及同样的类只写一次

下面是个例子，使用 Tailwind @apply function 清理HTML：

.btn {
  @apply font-bold py-2 px-4 rounded;
}

.btn-blue {
  @apply bg-blue-500 text-white;
}

.btn-blue:hover {
  @apply bg-blue-700;
}

我个人喜欢的一种方法是将类保存在模版文件中，然后让模板可复用。React 组件是一个很好的例子。

我们已经讨论了很多。现在，我们聚焦到如何使用 Tailwind 来构建一些东西。

什么是 Tailwind CSS？

现在让我们已经看了一个简单的例子，让我们来深入挖掘一下。 Tailwind CSS 是一个 CSS 框架，它与你之前用过的都不一样。当人们想到 CSS 框架的时候，最先想到的是使用最广泛的 Bootstrap，或者其他流行的 Foundation、Bulma。

Tailwind 是一个特别的框架。相对于预先写好样式的组件，Tailwid 提供一大堆功能类。

下面是 Tailwind 所提供的一些种类的 class

我们有许多定义好的工具类，可以直接使用。下面是一些类的 Tailwind 文档地址。

• Background Color
• Padding
• Flexbox
• Grid
• Font Size

Tailwind 的文档，是非常好的帮助我们上手的资料。当需要使用某一类型的类时，可以很快的找到。在页面中敲击 /，可以快速聚焦到 search bar 上。

Tailwind 的优点

当我们使用 Bootstrap，或者其他类似的框架时，我们有大量的预编译好现成的组件可以直接使用，如 card，navbar 以及其他。当我们要自定义这些组件时，我们要写大量的自定义这些组件样式的 CSS 代码，以及覆盖基础样式。

这会带来带来混乱，让我们陷入编写相互覆盖样式的代码的泥潭。

Tailwind 给我们提供一个「只引用需要代码」的选择。

用 Tailwind 越多，好处越明显。让我们看一下这些好处，以及构建一点东西。

包大小

Tailwind 本身体积不小。这是因为它提供了很多工具类。

 

最大的好处提，可以使用 Purgecss 控制文件的大小时。Purgecss 将检查我们的 HTML文件，并找出所有用到的 Tailwind 类。任何没有被用到的类，将会被从最终生成的 CSS 文件中移出。

当我们将所有未用到的类移出后，我们的 CSS 文件体积减小到 13kb！

定制容易

Tailwind 允许我们 定制一切 与类相关的内容。我们可以改变所使用的颜色，字号大小，padding距离，响应式布局，以及其他。

我们可以创建一个 tailwind.config.js，将我们的配置写入其中。这样，我们的配置将会覆盖调 Tailwind 默认的配置。

// Example `tailwind.config.js` file

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

快速实现响应式

我们可以通过使用 Tailwind 提供的工具类，编写响应式内容。我从来不喜欢自己编写响应式断点代码。

Tailwind 中，已经定义好了一系列响应式类型，这些工具类通过前缀来进行区分：

• sm: min-width: 640px
• md: min-width: 768px
• lg: min-width: 1024px
• xl: min-width: 1280px

假设我们想要实现一个 box，在大屏幕上，背景是蓝色的，在小屏幕上，背景是蓝色的。通过这些定义好的前缀，很容易实现。

<div class="bg-red-400 lg:bg-blue-400">
    <p>i am red on small and medium devices</p>

    <p>i am blue on large and extra large devices</p>
</div>

超级快速实现原型（如果你熟悉 CSS）

我最喜爱 Tailwind 的特性是，我可以通过它，快速的将出色的设计搬到浏览器上。Tailwind 不会为你提供完美的设计。它只是为你提供快速创建的工具。我从不认为自己是设计师，也没有使用 Figma 这样的工具。我往往直接进入浏览器中，边开发，边设计。

如果你使用 Tailwind，你需要熟悉你的 CSS

使用 Tailwind，将让你熟悉你的 CSS 类是如何构建出来的，而不会将你隐藏在组件后面。如果你使用 Bootstrap 中的 card，你也许不清楚 card 里面有什么东西。当你使用 Tailwind，你会确切的知道与 CSS 有关的的细节。

我们使用 Tailwind 重新创建了一些 Web 上的东西，查看这些文章，以了解我们如何使用 Tailwind 快速构建原型。

https://scotch.io/tutorials/r...
https://scotch.io/tutorials/r...
https://scotch.io/tutorials/r...

结尾

Tailwind CSS 是看待 CSS 的一种与众不同的视角。它为你提供一个良好基础，以方便你快速创建任何类型设计。

可能需要一些时间来适应，但我认为这些努力是值得的。

你再也不用覆盖 CSS 框架中内置的样式了