顏色

如果設(shè)計(jì)同學(xué)提供了項(xiàng)目中的主題色航瞭，并且有語義化的名稱，比如類似success坦辟，info沧奴，warning這種語義化的顏色，我們就可以基于這些來配置我們的顏色长窄，包括但不限于字體滔吠、背景、邊框挠日、陰影顏色(配置完之后直接可以使用類似text-success的類來設(shè)置顏色)疮绷，可以替換css預(yù)處理器的變量功能

// 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版本的設(shè)置有些許區(qū)別冬骚，v2具體的設(shè)置什么類別的顏色需要特別指定。

間距 & 寬高 & 行高 & 圓角 & 邊框?qū)挾?/h3>

因?yàn)?code>tailwindcss默認(rèn)長(zhǎng)度相關(guān)的配置是基于rem的懂算，而PC端的項(xiàng)目大多數(shù)時(shí)候我們都是固定一個(gè)寬度只冻，左右留白，所以大多數(shù)情況下计技，設(shè)計(jì)稿都會(huì)在固定一個(gè)寬度內(nèi)喜德，元素的大小寬高邊距單位都是px，所以我們需要對(duì)默認(rèn)的做一些特定配置來適配我們的項(xiàng)目

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

移動(dòng)端適配方案

可能對(duì)于移動(dòng)端適配垮媒，現(xiàn)在流行的就是viewport方案了舍悯，也可能有的項(xiàng)目還在用flexable方案，但是我們又不想手動(dòng)換算px到rem或vw睡雇，雖然社區(qū)也有類似pxtorem或者pxtovw這種postcss的插件萌衬，但解決問題的方法還是不夠優(yōu)雅，可能是因?yàn)椴寮木S護(hù)的不積極它抱，可能是插件不好用秕豫，不兼容postcss8(pxtovw說的就是你??)，既然我們都有tailwindcss了观蓄，那就讓這些配置變的更簡(jiǎn)單一些吧混移！如果你們?cè)O(shè)計(jì)同學(xué)提供了常用的間距方案，比如4px的倍數(shù)或者6px的倍數(shù)蜘腌，現(xiàn)在假設(shè)設(shè)計(jì)同學(xué)的設(shè)計(jì)稿都是750px的沫屡，我們就可以基于此來寫兩個(gè)函數(shù)方法來處理pxtorem和pxtovw的任務(wù)，如果你們是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: [],
}

當(dāng)然圓角大小金矛，邊框?qū)挾鹊榷伎梢赃@么配置，是不是比使用插件優(yōu)雅多了

嵌套語法

有的同學(xué)可能對(duì)css預(yù)處理器的嵌套語法情有獨(dú)鐘勺届，tailwindcss里面可以嗎驶俊？安排！
tailwindcss有一個(gè)插件叫@tailwindcss/nesting免姿，基于官網(wǎng)的一些配置饼酿，需要注意的是文檔上的是給postcss配置tailwindcss/nesting，實(shí)際上需要配置@tailwindcss/nesting，然后就可以基于css提供嵌套的能力，試試唄~

固定行數(shù)后截?cái)?/h1>

有時(shí)候我們會(huì)為了寫一個(gè)文本在x行之后階段并顯示...要寫好幾行樣式代碼鹿驼，所以我們通常會(huì)定義一個(gè)這樣的scss工具函數(shù)

@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對(duì)于這種特殊情況提供了專有的插件@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行后截?cái)?-->  
<div>

多主題

可能你維護(hù)的是一個(gè)需要支持多主題的項(xiàng)目，不同的情況下有多種配色方案喻犁，在tailwindcss中配合css var來實(shí)現(xiàn)多主題配色會(huì)簡(jiǎn)單到讓你窒息：

在你的全局css文件中配置主題槽片，假設(shè)我們有success、info肢础、warning這三種不同的主題配色

/* global base css */
@tailwind base;
@tailwind components;
@tailwind utilities;
// 默認(rèn)主題
: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中改變我們的顏色配置

// 讓我們的顏色支持透明度設(shè)置
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')],
}

最后根據(jù)不同的情況設(shè)置你的主題还栓，對(duì)要設(shè)置的主題的頂級(jí)元素設(shè)置對(duì)應(yīng)的class即可，內(nèi)部的所有顏色樣式都會(huì)對(duì)應(yīng)特定的主題而改變传轰！

<!-- 默認(rèn)主題 -->
<div>
  <!-- ... -->
</div>
<!-- 主題1 -->
<div class="theme-1">
  <!-- ... -->
</div>
<!-- 主題2 -->
<div class="theme-2">
  <!-- ... -->
</div>

一些最佳實(shí)踐

• 如果某些元素樣式特別復(fù)雜剩盒，導(dǎo)致html代碼很長(zhǎng)很亂怎么優(yōu)化？你可以通過tailwindcss提供的@apply指令將一系列樣式通過一個(gè)語義化的類表現(xiàn)出來

<div class="complex-node">xxxx<div>

// ...
<style>
.complex-node {
  @apply flex m-3 text-success rounded ....;
}
</style>

• 我有一些樣式是全局通用的路召，比如按鈕勃刨，卡片的一些樣式，我該怎么維護(hù)股淡？你可以通過tailwindcss提供的@layer指令將比較通用的樣式layer到components層，作為組件級(jí)別的樣式廷区，從而可以達(dá)到全局復(fù)用的目的

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

• 我的項(xiàng)目是多人維護(hù)的唯灵，我如何保證原子化的樣式類名稱有一個(gè)比較合理的順序呢？比如你喜歡先寫寬高然后寫定位隙轻，但是你的同事跟你相反埠帕，如何制定一個(gè)規(guī)范呢？tailwindcss提供了一個(gè)prettier插件prettier-plugin-tailwindcss玖绿，可以通過安裝插件并且配置保存后更新即可規(guī)范不同成員寫樣式類的格式化問題

npm install -D prettier prettier-plugin-tailwindcss

新建一個(gè)配置文件.prettierrc.json鍵入{}根據(jù)你們項(xiàng)目的原有配置進(jìn)行配置敛瓷，如果是個(gè)人項(xiàng)目也可以根據(jù)你個(gè)人喜好進(jìn)行配置，然后在vscode中安裝esbenp.prettier-vscode這個(gè)插件斑匪，然后打開你的設(shè)置搜索format呐籽，將Format On Paste和Format On Save都勾選上，就可以在保存完之后自動(dòng)對(duì)你的樣式類的順序進(jìn)行排序，排序的規(guī)則默認(rèn)是根據(jù)css box model從外到內(nèi)的規(guī)則進(jìn)行排序的：

margin - border - padding - content

總結(jié)

只是針對(duì)平時(shí)筆者使用到的部分對(duì)tailwindcss的能力進(jìn)行了一些淺談狡蝶，其實(shí)還有很多能力都沒有說到庶橱，比如v3提供的一些針對(duì)打印頁面的樣式，hover贪惹、active苏章、偽類等的一些設(shè)置，其實(shí)也比較簡(jiǎn)單奏瞬，具體使用的時(shí)候看下官方文檔就可以了枫绅。可能有部分小伙伴也會(huì)吐槽tailwindcss有很多基礎(chǔ)類的名稱需要記憶硼端，其實(shí)也不多并淋，熟能生巧，都是一勞永逸的東西显蝌。如果你也有不錯(cuò)的配置方案或者最佳實(shí)踐也可以在評(píng)論區(qū)告訴我预伺。最后，有用請(qǐng)點(diǎn)贊曼尊，喜歡請(qǐng)關(guān)注酬诀，我是Senar（公號(hào)同名），謝謝各位骆撇！

往期內(nèi)容

前端開發(fā)的基礎(chǔ)生產(chǎn)力素養(yǎng)（后期不定期更新）

記一次在老掉牙的Vue2項(xiàng)目中引入TypeScript和組合式Api和vueuse來改善大家伙的開發(fā)體驗(yàn)的艱辛歷程

各位frontend developer們瞒御，時(shí)機(jī)已經(jīng)成熟，讓我們開始用上pnpm吧

一文讓你徹底會(huì)用對(duì)象存儲(chǔ)OSS的前端直傳神郊，不懂就再看一遍ｋ热埂（bushi）