跳到主要内容

接口: UserDefinedOptions

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:18

0.重要配置​

cssCalc?​

optional cssCalc: boolean | (string | RegExp)[] | CssCalcOptions

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:163

预计算 CSS 变量或 calc 表达式的结果。

Version​

^4.3.0

备注​

解决部分机型对 calc 计算不一致的问题，可传入布尔值、选项对象或自定义匹配列表（支持正则）。在启用计算后，可通过 includeCustomProperties 指定需要保留的变量。

示例​

// 原始输出
page,
:root {
  --spacing: 8rpx;
}
.h-2 {
  height: calc(var(--spacing) * 2);
}
// 启用 cssCalc 后
.h-2 {
  height: 16rpx;
  height: calc(var(--spacing) * 2);
}
cssCalc: ['--spacing']
cssCalc: { includeCustomProperties: ['--spacing'] }

cssEntries?​

optional cssEntries: string[]

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:253

指定 tailwindcss@4 的入口 CSS。

Version​

^4.2.6

备注​

未配置时无法加载自定义插件，等价于设置 tailwindcss.v4.cssEntries。

cssPreflight?​

optional cssPreflight: CssPreflightOptions

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:121

控制在视图节点上注入的 CSS 预设。

Issue​

https://github.com/sonofmagic/weapp-tailwindcss/issues/7

备注​

默认会向所有 view/text 元素注入 Tailwind 风格的基础样式，可通过此配置禁用、调整或补充规则，受 cssPreflightRange 影响。

示例​

cssPreflight: {
  'box-sizing': 'border-box',
  'border-width': '0',
  'border-style': 'solid',
  'border-color': 'currentColor',
}

cssPreflight: false

cssPreflight: {
  'box-sizing': false,
  background: 'black',
}

cssPreflightRange?​

optional cssPreflightRange: "all"

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:130

控制 cssPreflight 注入的 DOM 选择器范围。

Issue​

https://github.com/sonofmagic/weapp-tailwindcss/pull/62

备注​

仅 view、text 及其伪元素会受影响。设置为 'all' 可以覆盖所有元素，此时需自行处理与宿主默认样式的冲突。

cssPresetEnv?​

optional cssPresetEnv: pluginOptions

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:235

postcss-preset-env 的配置项。

Version​

^4.0.0

参阅​

cssSelectorReplacement?​

optional cssSelectorReplacement: object

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:180

控制 CSS 选择器的替换规则。

root?​

optional root: string | false | string[]

将全局选择器 :root 替换为指定值。

默认值​

'page'

备注​

设置为 false 时不再替换，可根据宿主环境（例如 RootPortal）传入数组值。

示例​
root: ['page', 'wx-root-content']

universal?​

optional universal: string | false | string[]

将全局选择器 * 替换为指定值。

Issue​

https://github.com/sonofmagic/weapp-tailwindcss/issues/81

默认值​

['view','text']

备注​

小程序环境不支持 *，因此默认转换为 view、text；设置为 false 会留下原始选择器。

customAttributes?​

optional customAttributes: ICustomAttributes

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:63

自定义 wxml 标签属性的转换规则。

备注​

默认会转换所有标签上的 class 与 hover-class。此配置允许通过 Map 或对象为特定标签指定需要转换的属性字符串或正则表达式数组。

  • 使用 '*' 作为键可为所有标签追加通用规则。
  • 支持传入 Map<string | RegExp, (string | RegExp)[]> 以满足复杂匹配需求。
  • 常见场景包括通过组件 prop 传递类名，或对三方组件的自定义属性做匹配，更多讨论见 issue#129 与 issue#134。 如果自定义规则已经覆盖默认的 class/hover-class，可开启 disabledDefaultTemplateHandler 以关闭内置模板处理器。

示例​

const customAttributes = {
  '*': [/[A-Za-z]?[A-Za-z-]*[Cc]lass/],
  'van-image': ['custom-class'],
  'ice-button': ['testClass'],
}

customReplaceDictionary?​

optional customReplaceDictionary: Record<string, string>

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:72

自定义 class 名称的替换字典。

备注​

默认策略会将小程序不允许的字符映射为等长度的替代字符串，因此无法通过结果反推出原始类名。如需完全自定义，可传入 Record<string, string>，只需确保生成的类名不会与已有样式冲突。示例参考 dic.ts。

默认值​

MappingChars2String

disabled?​

optional disabled: boolean

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:42

是否禁用此插件。

备注​

在多平台构建场景下常用：小程序构建保持默认，非小程序环境（H5、App）传入 true 即可跳过转换。

示例​

// uni-app vue3 vite
import process from 'node:process'

const isH5 = process.env.UNI_PLATFORM === 'h5'
const isApp = process.env.UNI_PLATFORM === 'app'
const disabled = isH5 || isApp

import { UnifiedViteWeappTailwindcssPlugin as uvtw } from 'weapp-tailwindcss/vite'

uvtw({
  disabled,
})

ignoreCallExpressionIdentifiers?​

optional ignoreCallExpressionIdentifiers: (string | RegExp)[]

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:92

忽略指定调用表达式中的标识符。

Version​

^4.0.0

备注​

使用这些方法包裹的模板字符串或字符串字面量会跳过转义，常与 @weapp-tailwindcss/merge 配合（如 ['twMerge', 'twJoin', 'cva']）。

ignoreTaggedTemplateExpressionIdentifiers?​

optional ignoreTaggedTemplateExpressionIdentifiers: (string | RegExp)[]

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:83

忽略指定标签模板表达式中的标识符。

Version​

^4.0.0

备注​

当模板字符串被这些标识符包裹时，将跳过转义处理。

默认值​

['weappTwIgnore']

injectAdditionalCssVarScope?​

optional injectAdditionalCssVarScope: boolean

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:174

是否额外注入 tailwindcss css var scope。

Version​

^2.6.0

备注​

当构建链路（例如 @tarojs/plugin-html）移除了包含 * 的选择器时，可启用该选项重新写入变量作用域，以避免渐变等功能失效。

默认值​

false

px2rpx?​

optional px2rpx: boolean | PxtransformOptions

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:225

px 到 rpx 的转换配置。

Version​

^4.3.0

备注​

传入 true 启用默认映射（1px = 1rpx），或通过对象自定义更多行为。

rem2rpx?​

optional rem2rpx: boolean | UserDefinedOptions

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:216

rem 到 rpx 的转换配置。

Version​

^3.0.0

备注​

传入 true 使用默认配置，或提供 postcss-rem-to-responsive-pixel 支持的完整选项。

{
  rootValue: 32,
  propList: ['*'],
  transformUnit: 'rpx',
}

tailwindcss?​

optional tailwindcss: TailwindcssUserConfig

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:243

为不同版本的 Tailwind 配置行为。

Version​

^4.0.0

1.文件匹配​

cssMatcher()?​

optional cssMatcher: (name) => boolean

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:277

匹配需要处理的 wxss 等样式文件。

参数​

name​

string

返回​

boolean

htmlMatcher()?​

optional htmlMatcher: (name) => boolean

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:271

匹配需要处理的 wxml 等模板文件。

参数​

name​

string

返回​

boolean

inlineWxs?​

optional inlineWxs: boolean

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:327

是否转义 wxml 中的内联 wxs。

Experiment​

实验性质，有可能会改变

备注​

使用前同样需要在 tailwind.config.js 中声明 wxs 格式。

示例​

<!-- index.wxml -->
<wxs module="inline">
// 我是内联wxs
// 下方的类名会被转义
var className = "after:content-['我是className']"
module.exports = {
 className: className
}
</wxs>
<wxs src="./index.wxs" module="outside"/>
<view><view class="{{inline.className}}"></view><view class="{{outside.className}}"></view></view>

默认值​

false

jsMatcher()?​

optional jsMatcher: (name) => boolean

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:283

匹配需要处理的编译后 js 文件。

参数​

name​

string

返回​

boolean

mainCssChunkMatcher()?​

optional mainCssChunkMatcher: (name, appType?) => boolean

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:291

匹配负责注入 Tailwind CSS 变量作用域的 CSS Bundle。

参数​

name​

string

appType?​

AppType

返回​

boolean

备注​

在处理 ::before/::after 等不兼容选择器时，建议手动指定文件位置。

wxsMatcher()?​

optional wxsMatcher: (name) => boolean

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:302

匹配各端的 wxs/sjs/.filter.js 文件。

参数​

name​

string

返回​

boolean

Experiment​

实验性质，有可能会改变

备注​

配置前请确保在 tailwind.config.js 的 content 中包含对应格式。

默认值​

()=>false

2.生命周期​

onEnd()?​

optional onEnd: () => void

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:361

结束处理时触发。

返回​

void

onLoad()?​

optional onLoad: () => void

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:337

插件 apply 初始调用时触发。

返回​

void

onStart()?​

optional onStart: () => void

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:343

开始处理前触发。

返回​

void

onUpdate()?​

optional onUpdate: (filename, oldVal, newVal) => void

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:355

匹配并修改文件后触发。

参数​

filename​

string

oldVal​

string

newVal​

string

返回​

void

3.一般配置​

appType?​

optional appType: AppType

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:389

声明所使用的框架类型。

备注​

用于辅助定位主要的 CSS bundle，以便默认的 mainCssChunkMatcher 做出更准确的匹配，未传入时将尝试自动猜测变量注入位置。

arbitraryValues?​

optional arbitraryValues: IArbitraryValues

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:396

TailwindCSS 任意值的相关配置。

babelParserOptions?​

optional babelParserOptions: Partial<Options> & object

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:451

@babel/parser 的配置选项。

类型声明​

cache?​

optional cache: boolean

Version​

^3.2.0

cache?​

optional cache: boolean | ICreateCacheReturnType

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:443

控制缓存策略。

Version​

^3.0.11

cssChildCombinatorReplaceValue?​

optional cssChildCombinatorReplaceValue: string | string[]

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:468

自定义 Tailwind 子组合器的替换值。

备注​

为兼容小程序缺乏 :not([hidden])~ 支持的限制，默认会将 .space-x-4 等选择器替换为 view + view。可传入字符串或字符串数组以扩展适用标签。

// 数组示例
.space-y-4>view + view,text + text{}

// 字符串示例
.space-y-4>view,text,button,input ~ view,text,button,input{}

默认值​

'view + view'

cssRemoveHoverPseudoClass?​

optional cssRemoveHoverPseudoClass: boolean

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:487

是否移除 CSS 中的 :hover 选择器。

Version​

^3.2.1

Issue​

https://github.com/sonofmagic/weapp-tailwindcss/issues/293

备注​

小程序不支持 :hover，需要使用组件的 hover-class，因此默认删除相关节点。

默认值​

true

cssRemoveProperty?​

optional cssRemoveProperty: boolean

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:497

是否移除 @property 节点。

Version​

^4.1.2

备注​

微信小程序可识别 @property，但支付宝暂不支持，默认移除以避免构建失败。

默认值​

true

disabledDefaultTemplateHandler?​

optional disabledDefaultTemplateHandler: boolean

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:417

禁用默认的 wxml 模板替换器。

Version​

^2.6.2

备注​

启用后模板匹配完全交由 customAttributes 管理，需要自行覆盖默认的 class / hover-class 等匹配规则。

默认值​

false

jsPreserveClass()?​

optional jsPreserveClass: (keyword) => boolean | undefined

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:406

控制 JS 字面量是否需要保留。

参数​

keyword​

string

返回​

boolean | undefined

Version​

^2.6.1

备注​

当 Tailwind 与 JS 字面量冲突时，可通过回调返回 true 保留当前值，返回 false 或 undefined 则继续转义。默认保留所有带 * 的字符串字面量。

logLevel?​

optional logLevel: "info" | "warn" | "error" | "silent"

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:512

控制命令行日志输出级别。

备注​

默认 info，可设置为 silent 屏蔽全部输出。

postcssOptions?​

optional postcssOptions: Partial<Omit<Result, "file">>

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:476

postcss 的配置选项。

Version​

^3.2.0

supportCustomLengthUnitsPatch?​

optional supportCustomLengthUnitsPatch: boolean | ILengthUnitsPatchOptions

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:380

控制 Tailwind 自定义长度单位补丁。

Issue​

https://github.com/sonofmagic/weapp-tailwindcss/issues/110

备注​

TailwindCSS 3.2.0 起对任意值执行长度单位校验，会将未声明的 rpx 识别为颜色。本选项默认开启以注入 rpx 支持。当 Node.js 在插件执行前已缓存 tailwindcss 模块时，首轮运行可能未生效，可通过在 postinstall 中执行 weapp-tw patch 提前打补丁。

"scripts": {
+  "postinstall": "weapp-tw patch"
}

tailwindcssBasedir?​

optional tailwindcssBasedir: string

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:435

指定用于获取 Tailwind 上下文的路径。

Version​

^2.9.3

备注​

在 linked 或 monorepo 场景下可手动指向目标项目的 package.json 所在目录。

tailwindcssPatcherOptions?​

optional tailwindcssPatcherOptions: TailwindcssPatcherOptions

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:504

自定义 patcher 参数。

4.即将废弃配置​

customRuleCallback?​

optional customRuleCallback: CustomRuleCallback

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:547

自定义 PostCSS 规则的处理回调。

jsAstTool?​

optional jsAstTool: "babel" | "ast-grep"

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:528

选择用于解析 JS 的 AST 工具。

备注​

默认使用 babel，安装 @ast-grep/napi 并设置为 ast-grep 可获得更快速度。

危险

此配置将在 5.x 版本移除，后续仅保留 babel 实现。

mangle?​

optional mangle: boolean | IMangleOptions

定义于: packages/weapp-tailwindcss/src/typedoc.export.ts:540

是否对指定范围的类名执行压缩混淆。

备注​

默认关闭，可参考 unplugin-tailwindcss-mangle 获取完整配置。

危险

此配置将在 5.x 中移除，功能已迁移至 tailwindcss-mangle。

aizex
Aizex 合租面板
更好用的「GPT-4 x 克劳德」使用方式
亲测推荐