4.3.0 🚀

CSS变量计算模式

在 tailwindcss@4 下，默认启用 CSS 变量计算模式。tailwindcss@3 默认不启用。

此模式下会去预编译所有的 css 变量和 calc 计算表达式。

比如 tailwindcss@4 下原先生成的样式为:

page,
:root {
  --spacing: 8rpx;
}
.h-2 {
  height: calc(var(--spacing) * 2);
}

在CSS变量计算模式启动，进行预编译之后，现在的结果为:

page,
:root {
  --spacing: 8rpx;
}
.h-2 {
  height: 16rpx;
  height: calc(var(--spacing) * 2);
}

这个模式可以解决很多手机机型 calc rpx 单位的兼容问题

可通过给插件，传入 cssCalc 配置项 false 来手动关闭这个功能

假如这时候你需要去除 CSS 变量的声明，你可以传入

{
  cssCalc: ['--spacing']
}
// 或者更精确的
{
  cssCalc: {
    includeCustomProperties: ['--spacing']
  }
}

你也可以传入正则表达式

这样生成的结果就是:

page,
:root {
  --spacing: 8rpx;
}
.h-2 {
  height: 16rpx;
}

通过这种方式可以解决手机机型 calc rpx 单位的兼容问题

详见: https://tw.icebreaker.top/docs/api/interfaces/UserDefinedOptions#csscalc

新增配置项

px2rpx

添加 px2rpx 配置项， 用于控制是否将 px 单位转换为 rpx 单位， 默认为 false

传入 true 则会将所有的 px 单位, 1:1 转换为 rpx 单位

假如需要更多的转化方式，可以传入一个 object, 配置项见 https://www.npmjs.com/package/postcss-pxtransform

logLevel

添加 logLevel 配置项，用于控制日志输出级别， 默认为 info