So nutzt du: 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.
Auch gesucht als: tailwind arbitrary values, tailwind brackets, css to tailwind, grid-cols-[], arbitrary properties, tailwind custom values.
Passende Tools zu: 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.
- Klemmenrechner — Gib eine Mindest- und Höchstgröße sowie den Ansichtsbereich ein – du erhältst einen zoomfreundlichen clamp() Wert mit einer Erklärung der Berechnung, einer Live-Vorschau und einer vollständigen Skalierung für flüssige Schriftgrößen oder Abstände.
- 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.
Häufige Fragen
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.Kann ich Tailwind Arbitrary Value Generator als Web-App installieren und offline nutzen?
Ja. Tailwind Arbitrary Value Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.