这可能是小程序使用 tailwindcss 开发的最佳方案
笔者对 tailwindcss 的理解还算比较到位，也写了不少的 preset/plugin 和许多的 postcss 插件。
最近这个月，我发布了 weapp-tailwindcss-webpack-plugin 的 2.x 版本，与之前的版本相比，大大增强了我们开发者的开发体验，尤其是类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
// 创建 postcss.config.js
// 假如你使用的框架/工具不支持 postcss.config.js，则可以使用内联的写法
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
3. 配置 tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// 这里给出了一份 uni-app /taro 通用示例，具体要根据你自己项目的目录进行配置
// 注意，不在 content glob语法匹配的文件，不会生成工具类
content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
// ... other options
corePlugins: {
// 不需要 preflight，因为preflight主要是给 h5 的，小程序使用的独特的标签，导致preflight不起作用。
// 如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
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 端自适应相关的样式，对小程序环境来说没有用处。如果你有 @layer components 相关的工具类需要使用，可以引入。
二. 配置 rem 转 rpx
前面我们安装配置好了 tailwindcss，接下来一步便是配置 rem 转 rpx
为什么要配置这一步呢？
这是因为 tailwindcss 里面工具类的长度单位，默认都是 rem，比如:
.m-4{
margin: 1rem;
}
.h-4{
height: 1rem;
}
/*......*/
这在 h5 环境下自适应良好。但小程序里面，我们大部分情况都是使用 rpx 这个单位来进行自适应，所以就需要把默认的 rem 单位转化成 rpx。
配置tailwindcss单位转化
两种转化方式(二者选其一即可)
-
假如你想要把项目里，所有的
rem都转化成rpx，那么postcss plugin: postcss-rem-to-responsive-pixel 适合你。 -
假如你想缩小一下范围，只把
tailwindcss生成的工具类的单位，从rem转变为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
# 可以执行一下 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)
在创建uni-app项目时，请选择uni-app alpha版本
这是因为目前默认创建的版本还是使用的 @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 进行打包和开发，同样我们可以按照以下方式进行注册：
// 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 不起作用，请使用内联 postcss Latset
// css: {
// postcss: {
// plugins: postcssPlugins,
// },
// },
});
更多的框架!
支持更多的框架类型，可以查看 文档地址。
开始开发！
通过这三步，我们就完成了在小程序里使用 tailwindcss 的步骤了！
你可以立即启动项目，在你的模板文件，或者 js 文件里任意使用工具类, 它会实时的生成相应的 css class 并应用到 dom 上。
如果你在使用过程中遇到了问题，你可以前往 https://weapp-tw.icebreaker.top/ 进行检索，或者加入微信技术交流群，一起探讨前端技术！
