這可能是小程序使用 tailwindcss 開發(fā)的最佳方案
筆者對 tailwindcss 的理解還算比較到位拾并，也寫了不少的 preset/plugin 和許多的 postcss 插件。
最近這個月，我發(fā)布了 weapp-tailwindcss-webpack-plugin 的 2.x 版本署穗，與之前的版本相比，大大增強了我們開發(fā)者的開發(fā)體驗嵌洼，尤其是類jsx 框架相關的體驗案疲。
接下來，讓我們快速開始吧麻养！
快速開始
一.安裝與配置 tailwindcss
1. npm安裝 tailwindcss
# npm / yarn / pnpm
npm install -D tailwindcss postcss autoprefixer
# 生成 tailwind.config.js 文件
npx tailwindcss init
2. 把 tailwindcss 注冊進 postcss.config.js
// 創(chuàng)建 postcss.config.js
// 假如你使用的框架/工具不支持 postcss.config.js褐啡，則可以使用內聯(lián)的寫法
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
3. 配置 tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// 這里給出了一份 uni-app /taro 通用示例，具體要根據(jù)你自己項目的目錄進行配置
// 注意鳖昌，不在 content glob語法匹配的文件备畦，不會生成工具類
content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
// ... other options
corePlugins: {
// 不需要 preflight，因為preflight主要是給 h5 的许昨，小程序使用的獨特的標簽懂盐，導致preflight不起作用。
// 如果你要同時開發(fā)小程序和 h5 端糕档，你應該使用環(huán)境變量來控制它
preflight: false
}
}
4. 引入 tailwindcss
在你的項目入口引入 tailwindcss
比如 uni-app 的 App.vue
<style>
@tailwind base;
@tailwind utilities;
/* 使用 scss */
/* @import 'tailwindcss/base'; */
/* @import 'tailwindcss/utilities'; */
</style>
又或者 Taro 的 app.scss
@import 'tailwindcss/base';
@import 'tailwindcss/utilities';
然后在 app.ts 里引入
Q&A: 為什么沒有引入
tailwindcss/components? 是因為里面默認存放的是 pc 端自適應相關的樣式莉恼，對小程序環(huán)境來說沒有用處。如果你有 @layer components 相關的工具類需要使用速那，可以引入俐银。
二. 配置 rem 轉 rpx
前面我們安裝配置好了 tailwindcss，接下來一步便是配置 rem 轉 rpx
為什么要配置這一步呢端仰？
這是因為 tailwindcss 里面工具類的長度單位捶惜，默認都是 rem，比如:
.m-4{
margin: 1rem;
}
.h-4{
height: 1rem;
}
/*......*/
這在 h5 環(huán)境下自適應良好荔烧。但小程序里面吱七，我們大部分情況都是使用 rpx 這個單位來進行自適應，所以就需要把默認的 rem 單位轉化成 rpx鹤竭。
配置tailwindcss單位轉化
兩種轉化方式(二者選其一即可)
假如你想要把項目里踊餐，所有的
rem都轉化成rpx，那么postcss plugin: postcss-rem-to-responsive-pixel 適合你诺擅。假如你想縮小一下范圍市袖，只把
tailwindcss生成的工具類的單位，從rem轉變?yōu)?rpx，那么tailwindcss preset: tailwindcss-rem2px-preset 適合你苍碟。
推薦第一種轉化方式酒觅，這會把項目里所有你編寫的，或者引入的第三方控件里的 rem 單位微峰，全部轉化為 rpx舷丹，當然這個包也提供了各種配置項，幫助你進行更加細致的操作蜓肆。
1. postcss-rem-to-responsive-pixel (推薦)
首先我們安裝它:
npm i -D postcss-rem-to-responsive-pixel
安裝好之后颜凯，把它注冊進你的 postcss.config.js 即可:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-rem-to-responsive-pixel': {
// 轉化的單位,可以變成 px / rpx
transformUnit: 'rpx',
// 32 意味著 1rem = 32rpx
rootValue: 32,
// 默認所有屬性都轉化
propList: ['*']
},
},
};
2. tailwindcss-rem2px-preset
同樣我們安裝它：
npm i -D tailwindcss-rem2px-preset
然后在 tailwind.config.js 中，注冊這個預設：
// tailwind.config.js
module.exports = {
presets: [
require('tailwindcss-rem2px-preset').createPreset({
// 32 意味著 1rem = 32rpx
fontSize: 32,
// 轉化的單位,可以變成 px / rpx
unit: 'rpx'
})
],
// ...
}
這樣即可完成 tailwindcss 默認工具類的 rem 轉 rpx 的配置了仗扬。
三. 安裝本插件
# npm / yarn /pnpm
npm i -D weapp-tailwindcss-webpack-plugin
# 可以執(zhí)行一下 patch 方法
npx weapp-tw patch
然后把下列腳本症概，添加進你的 package.json 的 scripts 字段里:
"scripts": {
+ "postinstall": "weapp-tw patch"
}
接下來我們就開始在不同的框架里注冊了，這里我們以目前市面上主流的 taro 和 uni-app 為例：
taro (all frameworks)
在使用Taro時早芭，檢查一下把 config/index 的配置項 compiler 設置為 'webpack5'
// config/index 文件中
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss-webpack-plugin')
{
mini: {
webpackChain(chain, webpack) {
chain.merge({
plugin: {
install: {
plugin: UnifiedWebpackPluginV5,
args: [{
appType: 'taro'
}]
}
}
})
}
}
}
uni-app (vue2/3)
在創(chuàng)建uni-app項目時彼城，請選擇uni-app alpha版本
這是因為目前默認創(chuàng)建的版本還是使用的 @vue/cli 4.x 的版本，它使用 webpack4 和 postcss7退个，而 alpha 版本使用 @vue/cli 5.x 即 webpack5 和 postcss8募壕，這可以使用最新版本的 tailwindcss。
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
更多 uni-app 模板詳見 quickstart-cli
// 在 vue.config.js 里注冊
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss-webpack-plugin')
/**
* @type {import('@vue/cli-service').ProjectOptions}
*/
const config = {
// some option...
configureWebpack: (config) => {
config.plugins.push(
new UnifiedWebpackPluginV5({
appType: 'uni-app'
})
)
}
// other option...
}
module.exports = config
uni-app vite(vue3)
uni-app vue3/Vite版是目前 uni-app 的最新版本语盈，使用 vite 進行打包和開發(fā)舱馅，同樣我們可以按照以下方式進行注冊：
// vite.config.[jt]s
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss-webpack-plugin/vite'
// uvwt() 要放在 uni 官方插件之后
const vitePlugins = [uni(),uvwt()]
export default defineConfig({
plugins: vitePlugins,
// 假如 postcss.config.js 不起作用，請使用內聯(lián) postcss Latset
// css: {
// postcss: {
// plugins: postcssPlugins,
// },
// },
});
更多的框架!
支持更多的框架類型刀荒，可以查看 文檔地址代嗤。
開始開發(fā)！
通過這三步照棋，我們就完成了在小程序里使用 tailwindcss 的步驟了资溃！
你可以立即啟動項目武翎，在你的模板文件烈炭，或者 js 文件里任意使用工具類, 它會實時的生成相應的 css class 并應用到 dom 上。
如果你在使用過程中遇到了問題宝恶，你可以前往 https://weapp-tw.icebreaker.top/ 進行檢索符隙，或者加入微信技術交流群，一起探討前端技術垫毙！
