什麼是 tailwindcss?
在解釋 tailwindcss 之前，我們先了解一下它的前身 atomic css
atomic css 即原子 css，它提倡并提供一套原子類，類名為其對應 css 的縮寫
例如：
class="mt-20" => .mt-20 { margin-top: 20px; }
class="flex" => .flex { display:flex; }
class="hover:bg-red" => .hover:bg-red:hover { background:red; }
看到這裡有人會問， atomic css 和直接寫内聯樣式有什麼差別呢？
- atomic css 可以支援僞類，僞元素，甚至媒體查詢，而内聯樣式不支援
- atomic css 擁有内聯樣式的縮寫，開發效率更快
- atomic css 由于是 class 名，是以其内容可以個性化定制，而内聯樣式書寫後無法動态修改
但早在7年前就有人提出 atomic css 的缺點
而 tailwindcss 基于 atomic css，但它的出現彌補了 atomic css 的劣勢
- 通過配置檔案，實作主題和基準值定制，極大的擴充了靈活性
- 通過 tree-shaking，過濾未被引用的 css 類，減少生産環境體積
- 通過 postcss ，使得完美相容其他 css 預處理器
2020 年 css 架構滿意度調研可以發現，越來越多的人開始關注 tailwindcss
對比使用 tailwindcss 和傳統 css 的優劣勢：
| tailwindcss | 傳統css | ||
|---|---|---|---|
| 開發效率 | ✅ | ❌ | tailwind 無需取名，也不需要關注 dom 結構改變後，語義的變動 |
| 調試便捷 | 傳統 css 可以直接通過輸入類名在 ide 中定位對應代碼 | ||
| 語義化 | ???? | tailwind 側重代碼語義化，傳統 css 側重業務語義化 | |
| 主題定制 | tailwind 天然支援主題/基準值定制，傳統 css 需要借助預處理器 | ||
| 學習成本 | tailwind 需要學習簡寫文法，有一定學習成本 | ||
| 代碼體積 | tailwind 利用全局 css ，大大減少 css 代碼備援，無需維護 css 檔案 |
tailwindcss 并不是銀彈，但它提供了一種新的範式去編寫你的 css ，接下來會示範如何小程式項目中使用 tailwindcss
技術棧：
- taro3
- vue3
示例代碼：github.com/yeyan1996/t…
安裝
yarn add -D tailwindcss tailwind-mini postcss複制代碼 tailwindcss的基礎包，包含公共原子類，以及提供為 tailwindcss 提供定制化的插件
tailwind-mini
基于 tailwindcss 在小程式平台适配的插件包，fork 自 taro-tailwind
删除微信小程式不支援的 css，例如響應式/媒體查詢/僞類僞元素
修複了一些 bug，恢複了一些可能需要使用的 tailwindcss（漸變/inset 等）
postcss
額外安裝 postcss 8.0.0 以上版本，原因是 taro （3.0.12） 的 postcss 版本為 7.0.0 和 tailwindcss 内置插件不相容
基本配置
- 在 taro 中， postcss 的配置移到了 config/index.js 中
// config/index.jsconst config = { mini: {postcss: { tailwindcss: { enable: true }, 'tailwind-mini': { enable: true } // ...},
},
}module.exports = function (merge) { if (process.env.NODE_ENV === 'development') {return merge({}, config, require('./dev'))
} return merge({}, config, require('./prod'))
}複制代碼 - 建立 tailwind.css
touch src/tailwind.css複制代碼 /** src/tailwind.css */@tailwind utilities;複制代碼 由于使用了 postcss 和 tailwindcss 插件，是以能解析自定義文法 @tailwind，而 utilities 代表 tailwindcss 中公共原子類
- 在項目入口檔案引入 tailwindcss
// src/app.tsimport { createApp } from 'vue'import './tailwind.css'const App = createApp({})
App.use(store)export default App複制代碼 - 根目錄建立 tailwind.config.js
touch tailwind.config.js複制代碼 module.exports = { purge: ['./src/**/*.vue'], corePlugins: {// 涉及到子代選擇器（>），wx 小程式不支援space:false,divideStyle: false,divideWidth:false,divideColor: false,divideOpacity:false,// 涉及到通配符（*），wx 小程式不支援ringWidth:false,ringColor:false,ringOpacity:false,ringOffsetWidth:false,ringOffsetColor:false,// web 浏覽器相關功能，wx 小程式不支援appearance: false,cursor: false,outline: false,placeholderColor: false,pointerEvents: false,stroke: false,tableLayout: false,userSelect: false,
}, theme: {extend:{ zIndex: {'-1': '-1',
},
},spacing: { 0: '0', 1: '2rpx', 2: '4rpx', 3: '6rpx', 4: '8rpx', 5: '10rpx', 6: '12rpx', 7: '14rpx', 8: '16rpx', 9: '18rpx', 10: '20rpx', 11: '22rpx', 12: '24rpx', 14: '28rpx', 16: '32rpx', 17: '34rpx', 18: '36rpx', 20: '40rpx', 24: '48rpx', 28: '56rpx', 30: '60px', 32: '64rpx', 36: '72rpx', 40: '80rpx', 48: '96rpx', 52: '104rpx', 56: '112rpx', 60: '120rpx', 64: '128rpx', 72: '144rpx', 76: '152rpx', 80: '160rpx', 84: '168rpx', 88: '196rpx', 92: '184rpx', 96: '192rpx', 100: '200rpx', 120: '240rpx', 130: '360rpx', 140: '280rpx', 160: '320rpx', 180: '360rpx', 200: '400rpx', '1_2': '50%', '1_3': '33.333333%', '2_3': '66.666667%', '1_4': '25%', '3_4': '75%', '1_5': '20%', '2_5': '40%', '3_5': '60%', '4_5': '80%', '1_6': '16.666667%', '5_6': '83.333333%', '1_12': '8.333333%', '5_12': '41.666667%', '7_12': '58.333333%', '11_12': '91.666667%', full: '100%', auto: 'auto',
},fontSize: (theme) => theme('spacing'),borderWidth: (theme) => theme('spacing'),lineHeight: (theme) => theme('spacing'),translate: (theme) => theme('spacing'),inset: theme => theme('spacing'),width: (theme) => ({
...theme('spacing'), screen: '100vw',
}),maxWidth: (theme) => theme('height'),height: (theme) => ({
...theme('width'), screen: '100vh',
}),maxHeight: (theme) => theme('width'),
},
}複制代碼 配置項做了以下處理：
- 重寫了長度機關，适配小程式，例如 p-16 => padding: 32rpx => 16px ( 375 x 674 （iphone6）設計圖 )
- 微信小程式 class 名不支援反斜杠，替換為下劃線（ w-1_2 => width: 50% ）
- 由于 tailwind 引入的公共原子類（即 utilities）非常龐大，通過第二行中 purge 配置，可以過濾掉生産環境項目中未使用的 css，類似 css 版的 tree-shaking
- 開發環境：
項目沒有 css 檔案？tailwindcss 小程式實踐 - 生産環境：
項目沒有 css 檔案？tailwindcss 小程式實踐
- 開發環境：
額外配置
重寫長度基準值
如果你的設計圖不是 375 x 674 (iphone6)，則需重寫長度基準值
// tailwind.config.jsmodule.exports = { theme: { spacing: { 0: '0', 1: '2rpx', 2: '4rpx', 3: '6rpx' }, // 屬性值還可以是函數,并繼承傳入的參數
// 即 fontSize 會繼承 theme 下的 spacing 的長度值
fontSize: (theme) => theme('spacing'), // 等同于
// fontSize: {
// 0: '0',
// 1: '2rpx',
// 2: '4rpx',
// 3: '6rpx'
// },
}
}複制代碼 預設配置已經做了長度處理，使得 text-1 等于 2rpx，在 375 x 674 的設計圖上即 1px，最終達到設計圖機關 = css 名的效果
.text-0 { font-size: 0}.text-1 { font-size: 2rpx
}.text-2 { font-size: 4rpx
}.text-3 { font-size: 6rpx
}複制代碼 添加新的 class
如果預設的 class 不滿足需求，tailwindcss 支援添加新的 class
前面提到 tailwindcss 可以改變/建立基礎變量的顔色，實作主題定制，預設主題如下
使用 theme 下的 extend 屬性來實作 class 擴充
若直接修改 theme 下的屬性，會導緻覆寫原有的 class，務必注意
// tailwind.config.jsmodule.exports = { theme: { colors:{ // 這裡修改會覆寫原有 class },extend:{ colors: { red: {deep: '#fbbfbc',middle: '#fde2e2',shallow: '#fef1f1',
},
},
},
}
}複制代碼 以上示例添加了 red-deep/red-middle/red-shallow 的主題色，同時保留了原有的 red 主題色
.bg-red-deep { --tw-bg-opacity: 1; background-color: rgba(251, 191, 188, var(--tw-bg-opacity))
}.bg-red-middle { --tw-bg-opacity: 1; background-color: rgba(253, 226, 226, var(--tw-bg-opacity))
}.bg-red-shallow { --tw-bg-opacity: 1; background-color: rgba(254, 241, 241, var(--tw-bg-opacity))
}.bg-red-50 { --tw-bg-opacity: 1; background-color: rgba(254, 242, 242, var(--tw-bg-opacity))
}.bg-red-100 { --tw-bg-opacity: 1; background-color: rgba(254, 226, 226, var(--tw-bg-opacity))
}/* ... */複制代碼 Tips
css/scss/less/css module
使用 tailwind 代表你幾乎不需要使用任何 css 預處理器
但少數情況下，你可能還是需要單獨寫樣式，tailwind 提供 @apply 自定義指令，借助 postcss 可以将 tailwind 的文法單獨作用于樣式表中
<!-- Extracting classes using @apply --><button class="btn btn-green">
Button</button>複制代碼 .btn {
@apply py-2 px-4 font-semibold rounded-lg shadow-md;
}.btn-green {
@apply text-white bg-green-500 hover:bg-green-700;
}複制代碼 動态 class
不要使用動态拼接而成的 class，這會導緻 tree-shaking 失效
Ide 內建
Ide 插件會自動解析根目錄的 tailwind.config.js，動态生成智能提示
vscode：tailwindcss.com/docs/intell…