原由 & 前言

如果你沒有聽說過tailwindcss，請先return，本篇不談論tailwindcss是什麼怎麼用，而是怎麼優雅的使用。
如果你聽說過，請繼續閱讀並考慮使用tailwindcss，因為看完之後：
- 開發上：可能為你甚至你們的前端團隊節省很多寫樣式的時間，也能讓你或者你們的專案開發體驗有很大提升
- 生產上：你們的專案打出來的包體積中的樣式程式碼佔比將突然驟降然後趨於不變。

你真的需要css前處理器嗎

可能大多數同學在開發或者維護一個專案的時候，專案中應該都使用了諸如scss、less、stylus...等css預處理語言，甚至有的單個專案中使用了多種預處理語言，可能是為了使用變數，可能是為了複用樣式方便，也可能是為了寫一些函式方便我們對一些樣式值做一些處理，但是大部分時候我們是為了可以寫巢狀樣式，總之是為了提高我們的開發效率，這一切在tailwindcss出現之前都是那麼的美好，直到我們遇到了tailwindcss，你會發現你甚至連stylelint都不需要配置，因為你可能根本不用寫css

How & Which Version

tailwindcss v2 vs v3

如果你的專案需要相容IE，請使用v2版本，如果不需要請果斷上v3版本

具體如何在你的專案中使用tailwindcss，請務必檢視官網文件v2中文 v3English，推薦基於postcss來新增

安裝vscode外掛

如果你決定使用tailwindcss，安裝bradlc.vscode-tailwindcss這個官方提供的外掛，可以提供提示、補全、檢視實際設定的樣式的能力

配置你的tailwind

如果你已經按照文件教程建立了tailwind.config.js檔案，那麼接下來我們要對這個檔案進行進一步的配置

PC端專案

如果你的專案是隻針對PC端網頁的，可能你只需要問你們的設計同學你們專案中的一些基礎的設計原則有哪些，比如會使用的一些主題顏色，字型大小、梯度、內外邊距大小、梯度，常用的邊框圓角大小、梯度，邊框寬度、梯度，如果設計同學沒有這些原則，就協商一下這些基本原則，比如都會用到哪些顏色啊，邊距單位一般按照4px的倍數來設定啊……

顏色

如果設計同學提供了專案中的主題色，並且有語義化的名稱，比如類似success，info，warning這種語義化的顏色，我們就可以基於這些來配置我們的顏色，包括但不限於字型、背景、邊框、陰影顏色(配置完之後直接可以使用類似text-success的類來設定顏色)，可以替換css前處理器的變數功能

// tailwindcss v3
const colors = {
  'success': '#654321'，
  'info': '#123456',
  'warning': '#666666',
  // ...
}
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // ...
    colors,
  },
  plugins: [],
}
// tailwindcss v2
const colors = {
  'success': '#654321'，
  'info': '#123456',
  'warning': '#666666',
  // ...
}
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // ...
    textColor: colors,
    backgroundColor: colors,
    borderColor: colors,
  },
  plugins: [],
}

v2和v3版本的設定有些許區別，v2具體的設定什麼類別的顏色需要特別指定。

間距 & 寬高 & 行高 & 圓角 & 邊框寬度

因為tailwindcss預設長度相關的配置是基於rem的，而PC端的專案大多數時候我們都是固定一個寬度，左右留白，所以大多數情況下，設計稿都會在固定一個寬度內，元素的大小寬高邊距單位都是px，所以我們需要對預設的做一些特定配置來適配我們的專案

const spacing = {
  0: 0,
  4: '4px',
  8: '8px',
  12: '12px',
  // ... 專案中常用的都可以配置
}
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // v3 & v2
    spacing,
    lineHeight: spacing,
    borderWidth: spacing,
    borderRadius: spacing,
  },
  plugins: [],
}

移動端適配方案

可能對於移動端適配，現在流行的就是viewport方案了，也可能有的專案還在用flexable方案，但是我們又不想手動換算px到rem或vw，雖然社群也有類似pxtorem或者pxtovw這種postcss的外掛，但解決問題的方法還是不夠優雅，可能是因為外掛的維護的不積極，可能是外掛不好用，不相容postcss8(pxtovw說的就是你?)，既然我們都有tailwindcss了，那就讓這些配置變的更簡單一些吧！如果你們設計同學提供了常用的間距方案，比如4px的倍數或者6px的倍數，現在假設設計同學的設計稿都是750px的，我們就可以基於此來寫兩個函式方法來處理pxtorem和pxtovw的任務，如果你們是flexable方案就用pxToRem，如果是viewport的適配方案就用pxToVmin。

function pxToRem(variable) {
  return `${variable / 75}rem`
}

function pxToVmin(variable) {
  return `${variable / 7.5}vmin`
}
// flexable
const fontSize = {
  12: pxToRem(12),
  14: pxToRem(14),
  16: pxToRem(16),
  ...
}, spacing = {
  0: 0,
  4: pxToRem(4),
  8: pxToRem(8),
  12: pxToRem(12),
  ...
}
// viewport
const fontSize = {
  12: pxToVmin(12),
  14: pxToVmin(14),
  16: pxToVmin(16),
  ...
}, spacing = {
  0: 0,
  4: pxToVmin(4),
  8: pxToVmin(8),
  12: pxToVmin(12),
  ...
}
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // ...
    fontSize,
    spacing
  },
  plugins: [],
}

當然圓角大小，邊框寬度等都可以這麼配置，是不是比使用外掛優雅多了

巢狀語法

有的同學可能對css前處理器的巢狀語法情有獨鍾，tailwindcss裡面可以嗎？安排！
tailwindcss有一個外掛叫@tailwindcss/nesting，基於官網的一些配置，需要注意的是文件上的是給postcss配置tailwindcss/nesting，實際上需要配置@tailwindcss/nesting，然後就可以基於css提供巢狀的能力，試試唄~

固定行數後截斷

有時候我們會為了寫一個文字在x行之後階段並顯示...要寫好幾行樣式程式碼，所以我們通常會定義一個這樣的scss工具函式

@mixin ellipsis($line: 1, $substract: 0) {
    @if $line==1 {
        white-space: nowrap;
        text-overflow: ellipsis;
    } @else {
        display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
    }
    width: 100% - $substract;
    overflow: hidden;
}

tailwindcss對於這種特殊情況提供了專有的外掛@tailwindcss/line-clamp，只需要安裝一下，然後在tailwind.config.js中的plugins中引入即可

安裝外掛

npm install -D @tailwindcss/line-clamp

配置

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/line-clamp'),
  ],
}

使用

<div class="line-clamp-3">
  <!-- ...3行後截斷 -->  
<div>

多主題

可能你維護的是一個需要支援多主題的專案，不同的情況下有多種配色方案，在tailwindcss中配合css var來實現多主題配色會簡單到讓你窒息：

在你的全域性css檔案中配置主題，假設我們有success、info、warning這三種不同的主題配色

/* global base css */
@tailwind base;
@tailwind components;
@tailwind utilities;
// 預設主題
:root {
  --success: 5 193 174;
  --info: 51 163 238;
  --warning: 237 214 18;
}
// 主題1的配色
.theme-1 {
  --success: 36 195 102;
  --info: 54 143 255;
  --warning: 234 209 27;
}
// 主題2的配色
.theme-2 {
  --success: 57 209 121;
  --info: 0 186 255;
  --warning: 234 209 27;
}

然後到我們的tailwind.config.js中改變我們的顏色配置

// 讓我們的顏色支援透明度設定
function withOpacityValue(variable) {
  return ({ opacityValue }) => {
    return opacityValue === undefined
      ? `rgb(var(${variable}))`
      : `rgb(var(${variable}) / ${opacityValue})`
  }
}

const colors = {
  success: withOpacityValue('--success'),
  info: withOpacityValue('--info'),
  warning: withOpacityValue('--warning'),
  // ...
}
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // ...
    colors,
  },
  plugins: [require('@tailwindcss/line-clamp')],
}

最後根據不同的情況設定你的主題，對要設定的主題的頂級元素設定對應的class即可，內部的所有顏色樣式都會對應特定的主題而改變！

<!-- 預設主題 -->
<div>
  <!-- ... -->
</div>
<!-- 主題1 -->
<div class="theme-1">
  <!-- ... -->
</div>
<!-- 主題2 -->
<div class="theme-2">
  <!-- ... -->
</div>

一些最佳實踐

如果某些元素樣式特別複雜，導致html程式碼很長很亂怎麼優化？你可以通過tailwindcss提供的@apply指令將一系列樣式通過一個語義化的類表現出來
```
<div class="complex-node">xxxx<div>

// ...
<style>
.complex-node {
@apply flex m-3 text-success rounded ....;
}
</style>
```
我有一些樣式是全域性通用的，比如按鈕，卡片的一些樣式，我該怎麼維護？你可以通過tailwindcss提供的@layer指令將比較通用的樣式layer到components層，作為元件級別的樣式，從而可以達到全域性複用的目的
```
@layer components {
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
}
```
我的專案是多人維護的，我如何保證原子化的樣式類名稱有一個比較合理的順序呢？比如你喜歡先寫寬高然後寫定位，但是你的同事跟你相反，如何制定一個規範呢？tailwindcss提供了一個prettier外掛prettier-plugin-tailwindcss，可以通過安裝外掛並且配置儲存後更新即可規範不同成員寫樣式類的格式化問題
```
npm install -D prettier prettier-plugin-tailwindcss
```
新建一個配置檔案.prettierrc.json鍵入{}根據你們專案的原有配置進行配置，如果是個人專案也可以根據你個人喜好進行配置，然後在vscode中安裝esbenp.prettier-vscode這個外掛，然後開啟你的設定搜尋format，將Format On Paste和Format On Save都勾選上，就可以在儲存完之後自動對你的樣式類的順序進行排序，排序的規則預設是根據css box model從外到內的規則進行排序的：

margin - border - padding - content

總結

只是針對平時筆者使用到的部分對tailwindcss的能力進行了一些淺談，其實還有很多能力都沒有說到，比如v3提供的一些針對列印頁面的樣式，hover、active、偽類等的一些設定，其實也比較簡單，具體使用的時候看下官方文件就可以了。可能有部分小夥伴也會吐槽tailwindcss有很多基礎類的名稱需要記憶，其實也不多，熟能生巧，都是一勞永逸的東西。如果你也有不錯的配置方案或者最佳實踐也可以在評論區告訴我。最後，有用請點贊，喜歡請關注，我是Senar（公號同名），謝謝各位！