How to use the Tailwind Arbitrary Value Generator
- Paste one or more CSS declarations (a whole rule block works too).
- Optionally add a variant such as
md:orhover:. - Copy all classes at once, or individual ones from the table.
What are Tailwind arbitrary values?
When a design needs a value that isn’t in your Tailwind theme, you can write it inline in square brackets: w-[372px], bg-[#1da1f2], grid-cols-[1fr_200px_auto]. For CSS properties Tailwind has no utility for at all, use an arbitrary property: [clip-path:polygon(0_0,100%_0,100%_85%,0_100%)].
The syntax rules this tool handles
- No spaces: class names can’t contain spaces, so spaces become underscores —
1fr 200px auto→1fr_200px_auto. Spaces after commas are simply removed. - Type hints: some utilities are ambiguous with CSS variables (is
text-[var(--x)]a colour or a size?). The tool adds hints liketext-[color:var(--brand)]ortext-[length:var(--size)]. - !important: becomes the
!prefix. - Unsupported properties such as
mask-imageorclip-pathare output as arbitrary properties.
When not to use arbitrary values
Arbitrary values are perfect for one-offs. If the same value appears in several places, add it to your theme instead — for colours use the CSS Variables to Tailwind or Tailwind Color Generator tools — so it stays consistent and readable.
Tools that pair well with the Tailwind Arbitrary Value Generator
- Glassmorphism Generator — Design a frosted-glass card with live sliders and copy cross-browser CSS — with the -webkit-backdrop-filter prefix and a fallback for older browsers.
- Clamp Calculator — Enter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths explained, a live preview and a complete fluid type or space scale.
- CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
- CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
Frequently asked questions
How do I write spaces in Tailwind arbitrary values?
Use underscores:
grid-cols-[1fr_auto]. Tailwind converts them back to spaces. To use a real underscore, escape it as \_.What is an arbitrary property?
A class in the form
[property:value] for CSS properties without a Tailwind utility, e.g. [mask-type:luminance].Does this work with Tailwind v3 and v4?
Yes, the bracket syntax is the same in both. Tailwind v4 also accepts
(--var) shorthand for CSS variables.Why is there “color:” inside my class?
That’s a type hint. It tells Tailwind a
var() value is a colour, so it generates color instead of font-size.