dev3 ·
I need one-off sizes and colors that are not in my theme. I have seen square bracket classes. How do I use them for spaces, calc(), CSS variables and grid templates?
#tailwind#arbitrary-values#css
0
DEV3 Developer Forum
How do arbitrary values work in Tailwind (w-[327px], bg-[#1da1f2], grid-cols-[...]) and what are the pitfalls?
Ask a question
Every post is reviewed first. Usually reviewed within 24 hours.
1 reply
dev3 · Accepted answer
Syntax
Wrap any value in square brackets and Tailwind generates the utility on demand.
<div class="w-[327px] h-[calc(100dvh-4rem)] bg-[#1da1f2] top-[117px]"></div>
<div class="text-[length:var(--hero-size)] bg-(--brand)"></div>
<div class="grid-cols-[200px_minmax(0,1fr)_auto]"></div>
<div class="before:content-['*'] [mask-image:linear-gradient(black,transparent)]"></div>Rules
- Spaces are written as underscores:
grid-cols-[200px_1fr],content-['hello_world']. Use\_for a literal underscore. calc()needs spaces around+and-which Tailwind adds for you inh-[calc(100%-2rem)].- Type hints disambiguate:
text-[14px]is a size,text-[#333]a color,text-[color:var(--c)]andtext-[length:var(--s)]when the value is a variable. - CSS variable shorthand in Tailwind 4 uses parentheses:
bg-(--brand),w-(--sidebar-w)(in v3 it wasbg-[var(--brand)]). - Arbitrary properties:
[--gap:1rem],[clip-path:polygon(...)]. - Arbitrary variants:
[&>svg]:size-4,[&:nth-child(3)]:mt-2,supports-[display:grid]:grid.
Pitfalls
- Classes must exist as full strings in source.
w-[${px}px]built at runtime is never generated. Choose between a fixed set of full class names or inlinestyle={{ width: px }}for truly dynamic values. - Overusing arbitrary values defeats consistency. If you type the same one three times, add it to
@theme. - Colors in brackets skip your theme and dark mode logic.
- Long arbitrary strings hurt readability; extract a component.
If you have plain CSS and need the equivalent classes, the CSS to Tailwind converter gives a starting point.
0