tailwindcss 使用 js 编写的动态属性 编译异常

[BingyuDong]

weapp-tailwindcss 版本

3.3.2

框架 & 小程序平台

uni-app vue3 vite 编译到 微信 小程序

最小复现bug的代码仓库链接

No response

复现bug的步骤

代码片段

<view class="h-[100px] bg-white" :class="width"></view>

let a = 100
let width = `w-[${a}px]`

编译结果

<view class="h-_100px_ bg-white data-v-96370a4b w- 100px"></view>

预期是什么？

预期

<view class="h-_100px_ bg-white data-v-96370a4b w-_100px_"></view>

实际发生了什么？

w-[100px]被编译为了w- 100px

运行环境

No response

其他附加信息

No response

[sonofmagic]

这个是 tailwindcss 实现的问题，具体为什么可以看这个链接：

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

原因在于，tailwindcss 是编译时，对你的 content 里包括的源代码，进行提取 token 生成 css 的 你用动态的写法:

let a = 100
let width = `w-[${a}px]`

tailwindcss 是根本不会提取到的。

[BingyuDong]

感谢作者大人的解答，困惑我一天的问题终于得到解答了❤