Precision loss in pixel equivalents in hover tooltips

[potouridisio]

What version of VS Code are you using?

v1.103.2

What version of Tailwind CSS IntelliSense are you using?

v0.14.26

What version of Tailwind CSS are you using?

v4.1

What package manager are you using?

npm

What operating system are you using?

Windows

Tailwind CSS Stylesheet (v4)

@import "tailwindcss";

@theme {
  --spacing: 0.3125rem;
}

VS Code settings

{
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
  },
  "editor.defaultFormatter": "biomejs.biome",
}

Describe your issue

When hovering over utility classes in VS Code, the IntelliSense extension adds helpful comments showing the rem and px equivalents. For example:

.h-0\.5 {
  height: calc(0.3125rem /* 5px */ * 0.5) /* 0.1563rem = 2.5008px */;
}

Notice that the 0.15625rem value is rounded to 0.1563rem. While this doesn’t affect actual CSS output (browsers get the correct value), the tooltip rounding can be misleading when working with very tight spacing scales or when building systems that rely on exact subpixel values.

Request

Add a configuration option in the extension (e.g. tailwindCSS.hover.precision) to control the number of decimal places displayed in these comments.

Default could stay at 4 decimals for most users, but allowing 5 or more would preserve values like 0.15625rem.

Why it matters

Designers/devs sometimes need pixel-perfect conversions, and seeing rounded hover values creates unnecessary doubt.

Tailwind itself handles the math correctly — it’s just the display in the extension that’s imprecise.

[thecrypticace]

Will be fixed in the next release — I just bumped the precision a bit 👍

I don't want to introduce a option to control this right now. I think in an ideal scenario all expressions would be evaluated with high precision then rounded. With that there'd be little reason for a precision option in the first place.

That'll require some architectural changes but it is something I want to investigate.