4.3.0 🚀

[email protected] enabled CSS variable calculation mode by default and added finer-grained cssCalc, px2rpx, and related options, significantly improving rpx and calc compatibility across targets. This post explains what changed and how to use it.

Later versions changed CSS variable calculation mode back to default-off so large custom properties would not expand twice after compatibility handling. If you still need that compatibility layer, explicitly set cssOptions.cssCalc: true.

CSS variable calculation mode

Under tailwindcss@4, CSS variable calculation mode was enabled by default.

In this mode, all CSS variables and calc expressions are precompiled ahead of time.

For example, the original tailwindcss@4 output looks like this:

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

After precompilation with CSS variable calculation mode enabled, the result becomes:

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

This mode helps with compatibility issues around calc and rpx on many device runtimes.

The default behavior keeps the original calc() declaration so the stylesheet can still follow standard CSS cascading rules. If your target mini app runtime prefers the later calc() line and overrides the precomputed fallback, you can explicitly specify which CSS variables should have their original calc() declarations removed.

You can manually disable this feature by passing cssCalc: false to the plugin.

If you want to remove the original calc() declaration that matches --spacing, pass:

{
  cssCalc: ['--spacing']
}
// or more precisely
{
  cssCalc: {
    includeCustomProperties: ['--spacing']
  }
}

Regular expressions are supported as well.

That produces:

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

This is one practical way to fix device compatibility issues around calc and rpx.

See the current source and option types for the latest API shape.

New options

px2rpx

Adds a px2rpx option to control whether px units should be converted to rpx. The default is false.

Passing true converts every px unit to rpx at a 1:1 ratio.

If you need more advanced conversion behavior, pass an object. Its option shape follows https://www.npmjs.com/package/postcss-pxtransform

logLevel

Adds a logLevel option to control log output verbosity. The default is info.