👉👉👉 支持 tailwindcss jit 引擎的 weapp-tailwindcss-webpack-plugin 正在测试中，赶紧过来看看吧。

tailwindcss-miniprogram-preset

tailwindcss-preset for miniprogram tailwindcss 小程序版本预设

用 tailwindcss 来改善你的小程序开发体验吧

功能

大部分有用的 tailwindcss utilities 兼容小程序 + rem 转 rpx (默认 1rem = 32rpx)

migration(From v1 -> v2)

1// # v1
2// tailwind.config.js
3module.exports = {
4  presets: [require('tailwindcss-miniprogram-preset')]
5  // ...
6}
7// # v2
8// tailwind.config.js
9const {
10  defaultPreset,
11  createPreset
12} = require('tailwindcss-miniprogram-preset')
13module.exports = {
14  presets: [defaultPreset]
15  // ...
16}

How to use it

Installation

1npm i -D tailwindcss-miniprogram-preset
2# or
3yarn add -D tailwindcss-miniprogram-preset

Then

Installing Tailwind CSS as a PostCSS plugin

and npx tailwindcss init

then add tailwindcss-miniprogram-preset into your presets:

1// tailwind.config.js
2const {
3  defaultPreset,
4  createPreset
5} = require('tailwindcss-miniprogram-preset')
6module.exports = {
7  presets: [defaultPreset]
8  // ...
9}

createPreset 这个方法，可以根据配置创建自定义的预设，以及是否启用 rem2rpx，可配合其他 postcss 插件使用，如postcss-rem-to-responsive-pixel

Then import tailwindcss

1/* @tailwind base;
2@tailwind components; */
3@tailwind utilities;

or Using with Preprocessors

1// uni-app App.vue 公共部分
2// 小程序不需要 'base' 'components'
3// @import 'tailwindcss/base';
4// @import 'tailwindcss/components';
5// 只需引入工具类
6@import 'tailwindcss/utilities';

最佳实践

建议配合 vscode 插件 Tailwind CSS IntelliSense 使用

可以根据配置自动生成智能提示,可有效提升开发体验

使用 uni-app 的朋友可以直接使用提供的模板

• vue2

• vue3

默认配置

默认配置都可通过 tailwind 自带的 merge 策略开启, 其中

• darkMode 默认 false
• theme.screens 默认 false , 英文它不需要 pc 那种自适应边界
• important 默认 true , 需要用它去覆盖原生的样式
• purge.enabled 默认 process.env.NODE_ENV === 'production' ,可通过 NODE_ENV 环境变量,避免打包出来的 wxss 过大的问题, 开发环境默认关闭.
• 一些 class 的 rename 见下表

如何关闭 rem2rpx 转化?

将 createPreset 的 rem2rpx 设置为 false 即可

1// tailwind.config.js
2presets: [
3  createPreset({
4    rem2rpx: false
5  })
6]

此时需要转化为 rpx ，可以使用 postcss-rem-to-responsive-pixel

可以达到同样效果的 postcss 配置 demo:

1// postcss.config.js
2module.exports = {
3  plugins: [
4    require('autoprefixer'),
5    require('tailwindcss'),
6    require('postcss-rem-to-responsive-pixel')({
7      rootValue: 32,
8      propList: ['*'],
9      transformUnit: 'rpx'
10    })
11  ]
12}

定制化兼容小程序的牺牲

小程序的 class 不支持除'-'和'_'外的特殊符号

解决方案: 做 class rename 处理

form	to	sample
\/	-div-	w-1/4 -> w-1-div-4
\.	-dot-	w-1.5 -> w-1-dot-5

小程序 wxss 只支持少量选择器

官方文档链接

解决方案:

• 去除基于 :not 选择器的 corePlugins
• 去除不支持 * 选择器的 corePlugins , 例如默认添加 '*, ::before, ::after' 的插件
• 清空 variants (hover: focus: 这些)
• 不启用 mode: 'jit' 即时编译模式，因为 wxml 里写 w-[762px] ,[ 和 ],会被默认转义为空格，导致即时编译无效。(小程序特殊符号只支持 '-' 和 '_')

去除自适应和无用插件

解决方案:

• 只使用 utilities , 不导入 base 和 components

如何覆盖此预设配置？

核心插件:

corePlugins 选项根据您是将其配置为对象还是数组而表现不同。

如果您把 corePlugins 配置为一个对象，那么它就会被跨配置合并。

如果您把 corePlugins 配置为一个数组，它就会取代您配置的预设所提供的任何 corePlugins 配置。

官方参考文档

注意事项

如果开发时，HMR 热更新不起作用，可以更改 purge 选项

也可以直接用自定义的 purge 选项, 覆盖当前 preset

1// tailwind.config.js
2const { defaultPreset } = require('tailwindcss-miniprogram-preset')
3/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
4module.exports = {
5  purge: defaultPreset.purge.content,
6  presets: [defaultPreset]
7}

corePlugins 启用状况