[譯] 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 框架中內置的樣式了