總字?jǐn)?shù)：6,832 | 閱讀時間：18分鐘　

Tailwind CSS作為一款原子化的CSS框架，提供了一組高度可定制化的CSS程序和組件；幫助前端開發(fā)人員快捷、方便地構(gòu)建美觀的用戶界面；相比于傳統(tǒng)的CSS框架，Tailwind CSS更注重簡潔性和靈活性，可以和現(xiàn)有的前端框架如React、Vue、Angular等無縫集成，同時也避免了傳統(tǒng)CSS開發(fā)中需要編寫大量重復(fù)的樣式代碼。

CSS框架發(fā)展到現(xiàn)在，主要經(jīng)歷了四個階段，第一個階段是以CSS2.0和CSS3.0為主的，原生CSS階段，需要用到什么樣式就寫什么樣式，也會有一些簡單的復(fù)用；第二個階段是將CSS組件化，將具有相同視覺效果的元素封裝成同一個組件類，比如07年Twitter推出的Bootstrap框架，后面以及React和Vue等框架涌現(xiàn)出來的Element UI、Antd等各種各樣的組件庫，都對自身的組件進行了封裝，提供相當(dāng)豐富的預(yù)設(shè)組件。

第三個階段是出現(xiàn)以Sass、Less和Stylus為代表的的CSS預(yù)處理器，彌補了常規(guī)CSS語法不夠強大，沒有標(biāo)量和樣式復(fù)用的機制；使得我們在開發(fā)樣式時可以使用樣式嵌套、循環(huán)、變量、條件控制等更高級的語法，更加靈活方便的開發(fā)樣式。

但是豐富的組件庫在面對高度定制化的UI設(shè)計界面時，有時候也無可避免的需要自己寫一些樣式，不同組件中也會有重復(fù)封裝的樣式；同時高度封裝的組件，還需要一定的學(xué)習(xí)成本，知道組件樣式如何來控制；因此第四個階段以Tailwind CSS為主的CSS原子化，直接將CSS樣式打散，就像一個個原子一樣，將每個CSS的樣式應(yīng)用到對應(yīng)的類名。

比如我們最常用的flex布局，如果封裝到組件中，我們會在很多組件中不斷重復(fù)的寫flex樣式，比如下面的組件，我們對下面每個層級的flex布局都需要來寫對應(yīng)的樣式：

<template>
<div class="container">
  <div class="left"> ... </div>
  <div class="right"> ... </div>
</div>
</template>
<style  lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-around;
  .left {
    display: flex;
    justify-content: space-between;
  }
  .right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
</style>

但是，如果使用了Tailwind CSS，你只需要寫下面幾行代碼即可：

<template>
  <div class="flex justify-around">
    <div class="flex justify-between"></div>
    <div class="flex flex-wrap items-center"></div>
  </div>
</template>

怎么樣？是不是比上面的代碼簡潔多了；有些小伙伴可能會問，這些CSS類名都是什么意思？還是有一定的學(xué)習(xí)成本啊；別著急，Tailwind CSS的語義化CSS，再結(jié)合VS Code強大的插件功能，可以讓我們很輕松的記住這些類名；因此，筆者在做一些管理后臺類的項目時，由于對頁面樣式要求不高，在實際項目中大多數(shù)頁面都不用寫樣式，直接用類名即可，極大的提高了工作效率。下面，我們繼續(xù)來看Tailwind CSS還有哪些強大的功能吧。

安裝集成

首先我們在項目中安裝Tailwind CSS，將其作為PostCSS的一個插件，這樣我們就能和webpack、rollup、vite以及parcel等打包工具集成了；因此通過npm安裝相關(guān)的依賴：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwindcss init在項目中自動創(chuàng)建了一個配置文件tailwind.config.js，一些主題、插件等就可以在這里配置，我們將項目中的模板文件路徑添加進來：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 這里手動添加項目中需要的模板文件
    "./index.html", "./src/**/*.{vue,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

別忘記把tailwindcss配置到postcss.config.js中：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

創(chuàng)建一個/src/tailwind.css文件，通過@tailwind指令來添加每一個用到的功能模塊：

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

最后在我們的項目入口文件中引入tailwind.css:

// main.js
import './styles/tailwind.css';

這樣我們就能啟動查看項目了；項目啟動后，我們在寫class類名時，肯定記不住那么多繁雜的類名，就需要用到編輯器插件了；打開VS Code的擴展面板，搜索Tailwind CSS IntelliSense：

這里可以看到很多擴展，選擇第一個官方擴展進行安裝，就可以增強Tailwind的開發(fā)體驗；我們在寫類名時，模糊寫一個flex，就會帶出flex相關(guān)的類名，并且每個旁邊都會有對應(yīng)的類名的詳細(xì)屬性；甚至鼠標(biāo)放在現(xiàn)有類名上也會呈現(xiàn)具體樣式細(xì)節(jié)，這樣就不用擔(dān)心用錯類名了。

特性

我們來看下Tailwind CSS有哪些特性。

實用主義

Tailwind CSS設(shè)計思路是優(yōu)先考慮如何來滿足實際需求（Utility-First Fundamentals），因此提供了大量使用的CSS類名，可以款速構(gòu)建常見的界面元素，我們以官網(wǎng)的一個案例來理解它的實用主義優(yōu)先的原則：

<div
  class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4"
>
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

我們看下呈現(xiàn)的效果，也比較簡單。

在這個案例中，我們使用了下面幾種樣式：

寬高：最外層的元素使用max-w-sm限制最大寬度，圖片使用w-12和h12來限制圖片具體的寬度高度。
邊距：mx-auto來設(shè)置margin實現(xiàn)左右居中，p-6控制內(nèi)邊距padding。
flex布局：flex開啟flex布局、items-center設(shè)置items-center實現(xiàn)上下居中，shrink-0不收縮。
背景樣式：bg-white背景白色，rounded-xl圓角，shadow-lg陰影。
文字樣式：text-xl字體大小，font-medium字體加粗，text-black和text-slate-500字體顏色。

這里margin和padding比較特殊，有多種方式來設(shè)置；我們知道m(xù)argin: 24px是設(shè)置上下左右四個方向的邊距，在Tailwind CSS就可以簡寫成m-6；如果是margin: 24px 12px，Tailwind CSS就可以設(shè)置成X軸方向和Y軸方向，對應(yīng)的類名就是：mx-3 my-6，因此上面的mx-auto就非常好理解了；而上下左右對應(yīng)四個字母t、b、l、r，加上margin（m）和padding（p），就可以分別對應(yīng)不同方向的設(shè)置了，比如pb-4。

更多的樣式縮寫，如果小伙伴不知道怎么寫的話，可以查看官網(wǎng)的文檔，查一兩次語法基本就能記住了，還是比較語義化的。

我們發(fā)現(xiàn)這樣的寫法，會讓頁面顯得比較臃腫，喜歡這種寫法的人會非常喜歡，不喜歡它的人會覺得頁面很混亂，難以接受；但是筆者用下來發(fā)現(xiàn)確實有以下優(yōu)勢：

不用費時費力的去想各種類名，尤其是對于英文不好的小伙伴，思考類名也會占用我們小一部分的時間和精力。
樣式文件占用項目空間急劇下降，很多頁面寫少量甚至不用寫樣式，簡直不要太爽了。
不用擔(dān)心樣式覆蓋問題，有些樣式文件可能會被不同的頁面引用，改動的時候非常小心翼翼；現(xiàn)在樣式都在頁面上，再也不用擔(dān)心覆蓋了。

懸停聚焦

相較于常規(guī)的類名，我們頁面上更多的是鼠標(biāo)懸浮、聚焦等狀態(tài)，還有很多的偽元素和偽類修飾符，我們看下他們是如何通過類名的方式來實現(xiàn)的。

狀態(tài)更改修飾符

我們可以給按鈕元素設(shè)置懸浮、聚焦?fàn)顟B(tài)的改變，在CSS中是通過:hover，:focus等實現(xiàn)的，Tailwind CSS添加hover:前綴來實現(xiàn)，比如下面

<button 
  class="bg-sky-500 hover:bg-sky-700 ..">
  點我
</button>

這樣鼠標(biāo)懸浮后，背景顏色就會加深；還可以使用active:激活和focus:聚焦：

<button
  class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:bg-violet-800"
>
  點我
</button>

對于a鏈接，visited:修飾符表示鏈接已經(jīng)訪問過。

<a 
  href="https://xieyufei.com" 
  class="text-red-500 visited:text-red-500">
</a>

還有一些first-of-type:、last-of-type:、empty:、disabled:、checked:修飾符，這里就不再贅述。

元素修飾符

對于第一個和最后一個元素，使用first:和last:來選擇元素：

<li
  class="bg-blue-200 first:mt-10 last:bg-blue-300"
  v-for="item in 10"
  :key="item"
>
  {{ item }}
</li>

對于奇偶元素，可以使用odd:和even:修飾符來選擇元素：

<li
  class="bg-blue-200 odd:bg-blue-300 even:text-yellow-600"
  v-for="item in 10"
  :key="item"
>
  {{ item }}
</li>

對于一些特殊的子元素，比如選擇第幾個元素:nth-child，我們通過[&:nth-child(n)]前綴：

<li
  class="bg-blue-200 [&:nth-child(3)]:bg-blue-500"
  v-for="item in 10"
  :key="item"
>
  {{ item }}
</li>

父級修飾符

還有一些子元素的樣式依賴于父級元素，我們通過給父級元素標(biāo)記group類名，并且使用group-*的修飾符來標(biāo)記目標(biāo)元素，比如下面的例子：

<div
  class="group hover:bg-blue-300"
>
  <div
    class="text-black group-hover:text-white group-active:text-red-500"
  >
    ChitChat
  </div>
  <p class="text-slate-500 group-hover:text-white">
    You have a new message!
  </p>
</div>

除了group-hover，還支持group-active、group-focus或者group-odd等修飾符；如果有多個組嵌套的情況，我們可以使用group/{name}來標(biāo)記該父級元素，其中的子元素使用group-hover/{name}修飾符來設(shè)置樣式：

<li
  class="group/item"
  v-for="item in 10"
  :key="item"
>
  {{ item }}
  <div class="invisible group-hover/item:visible text-red-400 group/opt">
    <div class="group-hover/opt:text-red-700">hover me</div>
  </div>
</li>

比如上面的案例中，最外層的元素使用了group/item，而下面的按鈕使用了group/opt單獨變成一個組，用來控制該組下面的元素樣式。

同級修飾符

當(dāng)我們需要根據(jù)同級元素的狀態(tài)對目標(biāo)元素進行樣式設(shè)置時，使用peer標(biāo)記同級的元素，使用peer-*修飾符對目標(biāo)元素進行樣式設(shè)計，比如下面的案例：

<div>
  <span>Email</span>
  <input type="email" class="peer ..." />
  <p class="mt-2 invisible peer-invalid:visible text-pink-600">
    請輸入正確的郵箱地址
  </p>
</div>

我們給同級的輸入框標(biāo)記為peer，而p標(biāo)簽就是我們需要設(shè)計樣式的目標(biāo)元素，使用peer-invalid:visible讓p標(biāo)簽當(dāng)輸入框輸入內(nèi)容無效時進行內(nèi)容的顯示，效果如下：

和group的使用一樣，peer也可以使用peer/{name}來標(biāo)記某個具體的元素，然后使用peer-*/{name}來設(shè)計目標(biāo)元素的樣式。

todo

偽元素修飾符

對于::after和::before等偽元素，我們也可以使用before:和after:修飾符：

<span
  class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700"
>
  Email
</span>

當(dāng)使用before:和after:修飾符這類修飾符時，Tailwind CSS會默認(rèn)添加content: ''樣式，除非我們需要在content中添加其他內(nèi)容，否則不需要額外的聲明。

對于輸入框input的placeholder，我們可以使用placeholder:修飾符很方便的更改占位符樣式：

<input 
  class="placeholder:italic placeholder:text-slate-400 ..."
/>

夜間模式

我們在瀏覽有些網(wǎng)站或者App時都會看到有夜間模式的功能，啟用夜間模式可以讓網(wǎng)站展示不同的風(fēng)格樣式，Tailwind CSS可以通過類名很容易的控制；要開啟夜間模式，我們先在tailwind.config.js配置darkMode：

// tailwind.config.js
module.exports = {
  darkMode: "class",
  // ...
}

這樣我們就可以通過全局根節(jié)點上控制類名來控制整體的頁面風(fēng)格是否呈現(xiàn)夜間模式了，比如在html節(jié)點或者App.vue上添加/移除dark類名；下面就來對頁面進行改造，對于夜間模式下的背景顏色或者文字顏色，使用dark:修飾符，

<div id="app" :class="isDark ? 'dark' : ''">
  <div
    class="bg-white dark:bg-black"
  >
    <h3
      class="text-slate-900 dark:text-white"
    >
      謝小飛的博客地址：
    </h3>
    <p class="text-slate-500 dark:text-slate-400">
        https://xieyufei.com
    </p>
  </div>
</div>

在上面代碼中，我們使用了bg-white在默認(rèn)模式下的背景顏色為白色，以及dark:bg-black夜間模式下背景顏色為黑色，通過isDark變量來實現(xiàn)控制根節(jié)點開啟/關(guān)閉夜間模式；效果如下：

自定義樣式

對于一些全局的樣式，比如顏色模式、自適應(yīng)縮放模式、間距等等，我們可以添加到tailwind.config.js配置文件中：

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      red: '#ff0000',
      "main-color": "#ff7849",
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

比如覺得全局的red紅色，紅的不夠鮮艷，我們可以在colors中重新設(shè)置一個色值；或者設(shè)置一個全局的主要色值main-color，在頁面中使用bg-main-color或者text-main-color就可以設(shè)置一個全局的顏色。

在使用邊距值時，我們發(fā)現(xiàn)只有mt-6這種模糊的數(shù)據(jù)，使用的單位也是rem；如果設(shè)計稿需要比較精確的還原，我們可以使用大括號來將精確的數(shù)值進行呈現(xiàn)：

<div class="mt-[123px]">
</div>

對于色值、字體大小等，這種使用方式也是有效的：

<div 
  class="bg-[#f0f0f0] text-[22px] before:content-['11']">
</div>

甚至對于CSS變量，也可以直接使用大括號，都不需要var()，只需要提供變量名稱：

<div class="bg-[--my-color]">
</div>

函數(shù)指令

tailwind指令

在Tailwind CSS中，tailwind指令是用于快速生成基于配置的樣式代碼的工具。``tailw數(shù)生成相應(yīng)的樣式代碼，這些參數(shù)可以是任何有效的CSS屬性和值。它可以根據(jù) Tailwind CSS的配置文件中的設(shè)置來生成相應(yīng)的樣式代碼。

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

這里對應(yīng)參數(shù)的作用如下：

base：可以生成基礎(chǔ)樣式代碼，包括重置樣式、字體樣式、間距樣式等。
components：可以生成各種 UI 組件的樣式代碼，例如按鈕、卡片、表單等
utilities：可以生成高度定制化的、短小精悍的樣式代碼，用于實現(xiàn)特定的設(shè)計效果。
variants：可以用于創(chuàng)建自定義的樣式變體，在需要時靈活地應(yīng)用它們

layer指令

@layer指令是Tailwind CSS中一個重要的指令，它用于將 CSS 類分層，從而更好地組織和控制樣式。我們可以使用@layer指令來創(chuàng)建不同的層（layers）。層是CSS類的分組，這些組可以用于將 CSS 規(guī)則封裝為獨立的、可重用的模塊。通過將樣式規(guī)則組織到不同的層中，這樣就可以更好地控制樣式的作用范圍和優(yōu)先級。

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

這里的@layer base指令用于創(chuàng)建基礎(chǔ)層base。基礎(chǔ)層包含了通用的、基礎(chǔ)的樣式規(guī)則，例如顏色、字體、間距等。這些基礎(chǔ)樣式是整個網(wǎng)站中普遍適用的，通常不需要進行修改或定制。通過將基礎(chǔ)樣式規(guī)則分離到基礎(chǔ)層中，可以確保它們在整個網(wǎng)站中保持一致，并且不會受到其他樣式規(guī)則的影響。

而@layer components指令用于創(chuàng)建組件層components。組件層包含了與具體組件相關(guān)的樣式規(guī)則。組件可以是任何自定義的HTML元素或頁面組件，例如按鈕、卡片、表單等。組件層中的樣式規(guī)則通常與具體的UI組件有關(guān)，并且可能需要進行頻繁的修改和定制。

@layer utilities指令用于創(chuàng)建實用層。實用層包含了高度定制化的、短小精悍的樣式規(guī)則。這些規(guī)則通常是用來實現(xiàn)某些特定的設(shè)計效果。實用層中的樣式規(guī)則通常是單一用途的，并且可以根據(jù)需要進行精確地控制和定制。

apply指令

在Tailwind CSS中，我們可以使用@apply指令將現(xiàn)有的CSS類應(yīng)用于已經(jīng)定義的樣式規(guī)則，以實現(xiàn)更靈活的樣式控制：

.my-custom-class {  
  @apply text-center;  
  @apply bg-blue;  
  @apply border-2;  
}

比如在上面的案例中，我們定義了我們自己的類名my-custom-class，然后使用@apply指令將text-center、bg-blue和border-2應(yīng)用于我們自定義的樣式，這樣就可以根據(jù)具體的需求，封裝一系列我們需要的樣式規(guī)則。

總結(jié)

本文整理了Tailwind CSS的不同特性和用法，它的核心思想是實用性，使用方式也非常簡單，提供了一系列預(yù)設(shè)的CSS類名，同時可以根據(jù)不同的需求，自定義樣式組合，應(yīng)用于不同的場景中；通過Tailwind CSS，我們可以很方便的構(gòu)建一致性和可維護性的頁面，而且也無需編寫大量的CSS樣式。

總之，Tailwind CSS是一個非常實用的CSS框架，已經(jīng)被應(yīng)用于大量的網(wǎng)站和框架中，如果你現(xiàn)在還在為寫樣式而發(fā)愁，那么它是一個非常值得嘗試的選擇。

TailwindCSS實踐，越用越香！