[译] Tailwind CSS 15 分钟入门

翻译自：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 框架中内置的样式了