Specifically, for a utility like translate-y-0.25, I am getting the following warning using up-to-date VS Code, Tailwind extension, and package.json dependencies:
The class translate-y-0.25 can be written as translate-y-px (suggestCanonicalClasses)
The issue is that the original class translate-y-0.25 turns into translate: 0 0.0625rem, but the suggested class uses translate: 0 1px, but that changes the units.
With rem units, the original class is 1px only if a user has set 16px as their base font size, which is common but not guaranteed as users can override this in settings. The suggested class with pixel units, however, is always 1px as it does not scale with base font size.
Specifically, for a utility like
translate-y-0.25, I am getting the following warning using up-to-date VS Code, Tailwind extension, and package.json dependencies:The issue is that the original class
translate-y-0.25turns intotranslate: 0 0.0625rem, but the suggested class usestranslate: 0 1px, but that changes the units.With
remunits, the original class is1pxonly if a user has set16pxas their base font size, which is common but not guaranteed as users can override this in settings. The suggested class with pixel units, however, is always1pxas it does not scale with base font size.