TailwindCSS 的使用，看這一篇就夠了！

安裝

以下方法是Vite + Vue模式下的安裝方法，其他腳手架與框架的使用同理。

創建項目

pnpm create vite app --template vue
# yarn create vite app --template vue
# npm create vite app --template vue
複製代碼

安裝必要依賴

Vite 創建的項目默認集成了PostCSS，而TailwindCSS本身就是一個PostCSS插件，所以直接使用即可。

pnpm i -D tailwindcss postcss autoprefixer
# yarn add -D tailwindcss postcss autoprefixer
# npm i -D tailwindcss postcss autoprefixer
複製代碼

創建 TailwindCSS 配置文件

使用tailwindcss的初始化命令創建會更快：

npx tailwindcss init -p
複製代碼

這一步會做兩件事：

  1. 創建postcss.config.js文件，這裏的配置主要是添加tailwindcss的插件，這樣你編寫的 css 纔會被tailwindcss處理；

  2. 創建tailwind.config.js文件，主要進行掃描規則、主題、插件等配置。

爲了打包時 TailwindCSS 能生成對應的樣式文件，需要在tailwind.config.js中正確配置content字段，如以下配置將掃描 src 目錄下所有以 vue/js/ts/jsx/tsx 結尾的文件。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
複製代碼

注意

TailwindCSS 並不會生成一個全量的樣式包，而是根據具體使用到的語法生成對應的樣式代碼，這樣可以確保打包產生的樣式包是最小的。

參考這篇文章：tailwindcss.com/docs/conten…[2] :::

引入 Tailwind 的基本指令

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;
複製代碼

main.js

import './tailwind.css'
複製代碼

開始使用

現在，你可以開始使用 TailwindCSS 的語法了：

<template>
  <div>
  </div>
</template>

複製代碼

如上語法，你將在頁面看到一個正方形的藍色盒子：

TailwindCSS 語法檢索技巧 TailwindCSS 的基本原則是將每一個 style 語法轉換爲一個 class，因此，在官網檢索想要的樣式 class 時，按照樣式的語法來檢索是效率最高的。如想要獲取圓角的語法，只需要搜索Border Radius即可：

自定義 class 中使用 Tailwind 語法？

有時候，你可能會因爲重複的元素而不得不自定義一個 class，如：

<div class="p-2 text-gray-900 font-semibold">首頁</div>
<div class="p-2 text-gray-900 font-semibold">學習TailwindCSS</div>
<div class="p-2 text-gray-900 font-semibold">TailwindCSS的設計哲學</div>
<div class="p-2 text-gray-900 font-semibold">最佳實踐</div>
複製代碼

以上寫法不僅在開發時會造成重複的困擾，也不利於維護，此時我們會希望給每個元素一個 class，像這樣：

<div class="menu">首頁</div>
<div class="menu">學習TailwindCSS</div>
<div class="menu">TailwindCSS的設計哲學</div>
<div class="menu">最佳實踐</div>
複製代碼

現在問題來了，在爲menu定製樣式時，我們該怎樣使用 TailwindCSS 語法呢？

TailwindCSS 提供了@apply語法，這種語法的使用手感與在 html 模板中使用是一樣的：

.menu {
  @apply p-2 text-gray-900 font-semibold;
}
複製代碼

注意

  1. 儘管使用@apply語法可以解決樣式複用的問題，但並不推薦在早期就進行抽象，因爲自定義 class 的做法會生成更多的樣式代碼，造成生成的 css 文件變得更大。

  2. 還有一個理由可以證明不使用自定義 class 會更好：你完全可以通過循環的語法來解決此問題：

<template>
  <div
    v-for="menu in ['首頁', '學習TailwindCSS', 'TailwindCSS的設計哲學', '最佳實踐']"
    :key="menu"
   >{{{ menu }}}</div>
</template>
複製代碼

這樣未來維護時，不僅樣式的修改變得更加容易，內容區也會變得更好維護。

關於樣式複用的更多信息，可參考：tailwindcss.com/docs/reusin…[3] :::

如果進行的是組件級別的抽象，並且有需要讓他人覆蓋 class 的場景，則必須使用自定義 class 的方案，別無他選。（推薦組件級別的 class 複用使用 BEM 的命名規範）

自定義樣式中使用 Tailwind 的變量？

大多數情況下，我們完全可以組合使用 Tailwind 的原子化 class 來解決問題。但如果就是要使用自定義的樣式代碼，我們該如何使用到 Tailwind 配置中定義的變量呢？

比如下面的代碼中，希望爲某個元素添加一個上邊框，但是又想要使用到 Tailwind 配置中的gray-200顏色，該怎麼辦呢？

div {
  border-top: 1px solid ?;
}
複製代碼

因爲TailwindCSS本身是一個PostCSS插件，所以理論上任何有關TailwindCSS的配置信息都可以通過 css 的方式拿到。

TailwindCSS提供了一個theme函數，可以拿到tailwind.config.js中配置的theme的值：

div {
  border-top: 1px solid theme('colors.gray.200');
}
複製代碼

以上代碼最後會被編譯爲：

div {
  border-top: 1px solid #e5e7eb;
}
複製代碼

注意

TailwindCSS認爲，所有不使用其變量的值都爲魔法值。比如上方的代碼，完全可以使用1px solid #e5e7eb來實現，但是未來如果要對顏色進行統一調整，這行代碼將無法達到預期效果。

具體可參考文檔：tailwindcss.com/docs/functi…[4]

使用 Tailwind 配置之外的變量？

有時候，你不得不使用一些超出 Tailwind 配置之外的值，當你接到一個需求：

在頁面繪製一個寬 139px，高 77px，顏色爲 #165DFF 的盒子。

你找遍了 TailwindCSS 文檔，都沒找到可以直接使用的原子化 class，這時候，你可能不得不寫一些樣式：

div {
  width: 139px;
  height: 77px;
  background-color: #165DFF;
}
複製代碼

如果是這樣，那豈不是違背了 TailwindCSS 宣稱的 讓開發人員不離開 html 的目標？

是的！你永遠可以相信 TailwindCSS！！因爲這種情況，它都考慮到了：

<div class="w-[139px] h-[77px] bg-[#165DFF]"></div>
複製代碼

使用這種方法有兩個好處：

  1. 開發人員不用離開 html，手感還是那個手感，效率更高；

  2. 同樣的 class 還是隻生成一份樣式（10 個w-[139px]最終只會生成一份樣式代碼），減少了打包後的樣式文件大小

儘管這種方法可以優雅地解決問題，但這種 魔法值 的方案並不被推薦，因爲事實上，這種做法會讓樣式體系超出規範的範圍。如果項目中充斥着這種代碼，會給後期的維護造成困難。

參考文檔：tailwindcss.com/docs/adding…[5]

全面且好用的響應式方案

在TailwindCSS中寫響應式簡直是福音，例如這個綠色（如果你使用 PC 訪問，將是藍色）的盒子：

<div class="w-32 h-32 bg-green-500" />
複製代碼

如果要想讓其在768px以上的屏幕上顯示爲藍色，你需要這樣：

@media (min-width: 768px) {
  div {
    @apply bg-blue-500;
  }
}
複製代碼

而TailwindCSS只需要一行代碼：

<div class="w-32 h-32 bg-green-500 md:bg-blue-500" />
複製代碼

以上代碼表示的含義是：默認顯示綠色，在最小爲md(768px)的屏幕下顯示藍色。

TailwindCSS響應式的規則爲：

  1. mobile first，即手機端優先，你也可以理解爲，什麼斷點都不設置就相當於斷點爲 0；

  2. 斷點的含義是 大於等於，即min-width，而非max-width。具體可參考文檔：tailwindcss.com/docs/respon…[6]

具體響應式斷點可參考文檔：tailwindcss.com/docs/screen…[7]

高級用法 你甚至可以結合任意值語法，實現各種變態的響應式需求，如：

下面的這個盒子，讓它在 1300px 以下（包含 1300px）屏幕下顯示綠色，以上顯示藍色。

<div class="w-32 h-32 max-[1300px]:bg-green-500 bg-blue-500"></div>
複製代碼

爲 TailwindCSS 的設計拍案叫絕！！

暗黑模式

使用暗黑模式前，你需要在tailwind.config.js中配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // more options...
}

複製代碼

然後，你只需要少量的代碼，就可以使用暗黑模式了：

<div class="w-32 h-32 bg-blue-500 dark:bg-green-500"></div>
複製代碼

點擊右上角切換暗黑模式，上方的藍色盒子將變成綠色盒子。

更多使用方法可參考文檔：tailwindcss.com/docs/dark-m…[8]

重寫 / 覆蓋 Tailwind 配置

Tailwind 的默認配置與團隊的 UI 規範有出入？莫擔心，TailwindCSS 提供了一整套的重寫、覆蓋默認配置的方案，細粒度到每一個屬性。

舉個栗子，使用 Tailwind 的配置來實現Arco Design的字體顏色規範：

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      textColor: { // [!code focus:5]
        primary: '#1D2129',
        regular: '#4E5969',
        secondary: '#86909C',
        disabled: '#C9CDD4',
      }
    },
  },
  // ...
}
複製代碼

然後就可以使用了：

<span class="text-primary">主色</span> / 
<span class="text-regular">常規色</span> / 
<span class="text-secondary">次要色</span> / 
<span class="text-disabled">禁用色</span> / 
複製代碼

效果如下：

主色 / 常規色 / 次要色 / 禁用色 /

配置太多，就不贅述了，具體可參考：github.com/tailwindlab…[9]

放棄使用預處理器

在開始本小節，請讀者思考一個問題：

Sass/Less/Stylus 等預處理器，給我們帶來了什麼？

在沒有預處理器前，我們的 CSS 代碼是這樣的：

.foo {
  font-size: 12px;
}
.foo .bar {
  font-size: 14px;
}
複製代碼

有了預處理器後，代碼被簡化了：

.foo {
  font-size: 12px;
  .bar {
    font-size: 14px;
  }
}
複製代碼

預處理器在 嵌套語法、變量、常用函數、邏輯處理 等方面相比原生 CSS 有更大的優勢，它可以讓編寫 CSS 代碼的效率變得更高。

但是！！請注意！！當我們使用 TailwindCSS 時，實際推崇的是 TailwindCSS 官方 “標榜”（實際已經不是標榜了，很多都做 到了）的 不離開 html 、少樣式代碼甚至零樣式代碼 的價值觀。

總結 預處理器的核心優勢是爲了讓開發人員更快書寫樣式代碼，而 TailwindCSS 旨在消除樣式代碼，既然開發人員都不用寫樣式代碼了，那還需要預處理器幹嘛？:smile:

因此，TailwindCSS 官方極力推薦在項目中移除預處理器，具體可參考文檔：tailwindcss.com/docs/using-…[10]

如果仍然需要使用嵌套語法，怎麼辦？

TailwindCSS 封裝了 postcss-nested[11] 與 postcss-nesting[12] 插件，拋出了一個新的 postcss 插件，你只需要在postcss.config.js文件中加入以下代碼，即可在 css 文件中使用嵌套語法了：

module.exports = {
  plugins: {
    'tailwindcss/nesting': {}, // [!code focus]
    tailwindcss: {},
    autoprefixer: {},
  },
}

複製代碼

更多細節可參考：tailwindcss.com/docs/using-…[13]

注意

實際上，當你在 sass/scss/less/styl 文件中使用 Tailwind 語法時，可能會發生錯誤的預期甚至錯誤，因爲 TailwindCSS 的某些語法可能會與預處理器的語法衝突，如在 sass 文件中使用theme函數會得到不同的預期，因爲 sass 中也存在這個函數，而這種寫法會讓 sass 預處理器優先處理這個函數，而實際的期望是希望後處理器來處理。

預處理器的未來？參考文章：預處理器的未來？[14]

關於本文

作者：我想寫文章啊

https://juejin.cn/post/7200782261997338681

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/CnetddeH-i1hnqCev3uTLQ

猜你喜歡