Como usar: 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 color 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 colors use the CSS Variables to Tailwind or Tailwind Color Generator tools — so it stays consistent and readable.
Também pesquisado como: tailwind arbitrary values, tailwind brackets, css to tailwind, grid-cols-[], arbitrary properties, tailwind custom values.
Ferramentas que combinam com: 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.
- Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
- CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Perguntas frequentes
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 color, so it generates color instead of font-size.Posso instalar o Tailwind Arbitrary Value Generator como um aplicativo da web e usá-lo offline?
Sim. O Tailwind Arbitrary Value Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.