Cómo 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.
También se busca como: tailwind arbitrary values, tailwind brackets, css to tailwind, grid-cols-[], arbitrary properties, tailwind custom values.
Herramientas que combinan con: 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 abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
- 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.
Preguntas frecuentes
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.¿Puedo instalar Tailwind Arbitrary Value Generator como aplicación web y utilizarla sin conexión?
Sí. Tailwind Arbitrary Value Generator es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.