Resolves text-[--spacing(n)] as color instead of font-size #20257
Unanswered
marcjulian
asked this question in
Help
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
What version of Tailwind CSS are you using?
For example: v4.3.0, v4.3.1
What build tool (or framework if it abstracts the build tool) are you using?
For example: @tailwindcss/postcss 4.3.1, postcss 8.5.15, Angular v22
What version of Node.js are you using?
For example: v24.15.0
What browser are you using?
For example: Chrome, Firefox
What operating system are you using?
For example: macOS
Reproduction URL
Show casing the generated classes in TailwindPlay and a playground repository from spartan/ui for example in the hlm-spinner component uses the longer class name.
Describe your issue
Using the arbitrary value syntax
text-[--spacing(n)]to align font sizes with the spacing scale, to mimicsize-4, resolves the class ascolorrather thanfont-sizeproperty.This issue came up while porting shadcn styles to Angular spartan/ui using ng-icon. The icon sizes follows the font size, thus we need to replace
size-4withtext-[--spacing(4)].Angular template
Generated CSS - validate in the TailwindPlay
Expected Generated CSS -
text-util can be used for colors but also for font-size and expected it to produceAs an alternative, we use
text-[calc(var(--spacing)*4)]directly usingvar(--spacing)and not the--spacing(4)function. This resolves to a class withfont-sizeproperty.Another alternative class could be
text-[calc(--spacing(4))], included in the TailwindPlay, which resolves also tofont-sizeproperty, but includes thecalcfrom the arbitrary syntax and additionally from the--spacing()function.Tailwind CSS IntelliSense
When using the alternative class
text-[calc(var(--spacing)*4)]and Tailwind CSS IntelliSense is installed in VSCode, it suggest to replace the class with the shorter versiontext-[--spacing(4)].Suggestion
Quick Fix
IntelliSense for `text-[calc(var(--spacing)*4)]`
IntelliSense for `text-[--spacing(4)]`
Beta Was this translation helpful? Give feedback.
All reactions