Miniprogram-tailwind-preset NPM

miniprogram-tailwind-preset

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

安装

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, // https://tailwindcss.com/docs/container
accessibility: false, // 无障碍https://tailwindcss.com/docs/preflight#accessibility-considerations
placeholderColor: false, // 不支持::placeholder选择器,使用placeholder-class代替
placeholderOpacity: false, // 不支持::placeholder选择器,使用placeholder-class代替
// borderColor: false,
divideColor: false, //   不支持 :not 选择器
divideOpacity: false, //   不支持 :not 选择器
divideStyle: false, //   不支持 :not 选择器
divideWidth: false, //   不支持 :not 选择器
backdropFilter: false, // 不支持 * 选择器
filter: false, // 不支持 * 选择器  有自定义插件替换
ringWidth: false, // 不支持 * 选择器 有自定义插件替换
boxShadow: false, // 不支持 * 选择器 有自定义插件替换
fontVariantNumeric: false, // 不支持 * 选择器 有自定义插件替换
gradientColorStops: false, // 不支持 * 选择器 有自定义插件替换
scrollSnapType: false, // 不支持 * 选择器 有自定义插件替换
touchAction: false, // 不支持 * 选择器 有自定义插件替换
transform: false, // 不支持 * 选择器 有自定义插件替换
borderSpacing: false, // 不支持 * 选择器 有自定义插件替换

暂不支持的

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