Comment utiliser : 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.
Aussi recherché comme : tailwind arbitrary values, tailwind brackets, css to tailwind, grid-cols-[], arbitrary properties, tailwind custom values.
Outils complémentaires : 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.
- Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
- 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.
Questions fréquentes
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.Puis-je installer Tailwind Arbitrary Value Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. Tailwind Arbitrary Value Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.