Miniprogram-tailwind-preset NPM

miniprogram-tailwind-preset

在微信小程序中使用tailwindcss( 3.4.4 )时的预设文件.

特性

兼容大多数原生写法
关闭与小程序不兼容的默认插件,对应的自定义插件替换
修改默认separator为_

安装

npm i miniprogram-tailwind-preset --save-dev

配置

// tailwind.config.js
// import type { Config } from "tailwindcss";
import { preset } from "./src";
export default {
  content: ["your/wxml/files"],
  presets: [preset],
  // ...
}; // satisfies Config;

关闭的默认插件

preflight: false, // 不支持 * 选择器等不兼容的基础样式
container: false, // 不符合小程序的设计规范,如需要使用可自定义的媒体查询
placeholderColor: false, // 不支持::placeholder选择器,小程序中使用placeholder-class代替
placeholderOpacity: false, // 不支持::placeholder选择器,小程序中使用placeholder-class代替
divideColor: false, // 不支持 :not 选择器
divideOpacity: false, // 不支持 :not 选择器
divideStyle: false, // 不支持 :not 选择器
divideWidth: false, // 不支持 :not 选择器
backdropFilter: false, // 不支持 * 选择器,通过 backdropFilterPlugin 重新定义
filter: false, // 不支持 * 选择器,通过 filterPlugin 重新定义
ringWidth: false, // 不支持 * 选择器,通过 ringWidthPlugin 重新定义
boxShadow: false, // 不支持 * 选择器,通过 boxShadowPlugin 重新定义
fontVariantNumeric: false, // 不支持 * 选择器,通过 fontVariantNumericPlugin 重新定义
gradientColorStops: false, // 不支持 * 选择器,通过 gradientColorStopsPlugin 重新定义
scrollSnapType: false, // 不支持 * 选择器,通过 scrollSnapTypePlugin 重新定义
touchAction: false, // 不支持 * 选择器,通过 touchActionPlugin 重新定义
transform: false, // 不支持 * 选择器,通过 transformPlugin 重新定义
borderSpacing: false, // 不支持 * 选择器,通过 borderSpacingPlugin 重新定义
contain: false, // 不支持 * 选择器,通过 containPlugin 重新定义

自定义主题

见配置文件

自定义插件

不同于原生实体类的写法

任意值写法 (arbitrary values) 类样式: w-100rpx 编译结果: .my-[100rpx]{ width:100rpx } 是否报错: 是是否关闭: 未关闭测试版本库:截至3.2.5 原因: wxml属性字段不支持[],会把[]变为空格,wxss 不支持转义符\导致报错 .w-\[100px\] 替代方案: 对应主题加入1-750rpx映射值替代类样式:w-100 编译后: .w-100 { width: 100rpx }