So nutzt du: Tailwind Arbitrary Values Generator
- Füge eine oder mehrere CSS-Deklarationen ein (ein kompletter Regelblock funktioniert auch).
- Füge optional eine Variante wie
md:oderhover:hinzu. - Kopiere alle Klassen auf einmal oder einzelne Klassen aus der Tabelle.
Was sind Tailwind Arbitrary Values?
Wenn ein Design einen Wert braucht, der nicht in deinem Tailwind-Theme steht, kannst du ihn direkt in eckigen Klammern schreiben: w-[372px], bg-[#1da1f2], grid-cols-[1fr_200px_auto]. Für CSS-Eigenschaften, für die Tailwind gar keine Utility hat, nutzt du eine Arbitrary Property: [clip-path:polygon(0_0,100%_0,100%_85%,0_100%)].
Die Syntax-Regeln, die dieses Tool abdeckt
- Keine Leerzeichen: Klassennamen dürfen keine Leerzeichen enthalten, daher werden Leerzeichen zu Unterstrichen —
1fr 200px auto→1fr_200px_auto. Leerzeichen nach Kommas werden einfach entfernt. - Type Hints: Manche Utilities sind bei CSS-Variablen mehrdeutig (ist
text-[var(--x)]eine Farbe oder eine Größe?). Das Tool ergänzt Hinweise wietext-[color:var(--brand)]odertext-[length:var(--size)]. - !important: wird zum
!-Präfix. - Nicht unterstützte Eigenschaften wie
mask-imageoderclip-pathwerden als Arbitrary Properties ausgegeben.
Wann du keine Arbitrary Values verwenden solltest
Arbitrary Values eignen sich perfekt für Einzelfälle. Taucht derselbe Wert an mehreren Stellen auf, nimm ihn lieber in dein Theme auf. Für Farben nutzt du dafür die Tools CSS Variables to Tailwind oder Tailwind Color Generator, so bleibt er konsistent und lesbar.
Auch gesucht als: tailwind arbitrary values, tailwind eckige klammern, css zu tailwind, grid-cols-[], arbitrary properties, tailwind custom values, tailwind werte generator, css in tailwind umwandeln.
Passende Tools zu: Tailwind Arbitrary Values Generator
- Glassmorphism Generator — Gestalte eine Milchglas-Karte mit Live-Reglern und kopiere browserübergreifendes CSS – mit dem -webkit-backdrop-filter-Präfix und einem Fallback für ältere Browser.
- 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 — Verwandle ein minifiziertes Stylesheet in gut lesbares CSS mit einer Eigenschaft pro Zeile und sauber verschachtelten @media-Blöcken.
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.
Häufige Fragen
Wie schreibe ich Leerzeichen in Tailwind Arbitrary Values?
Mit Unterstrichen:
grid-cols-[1fr_auto]. Tailwind wandelt sie wieder in Leerzeichen um. Um einen echten Unterstrich zu verwenden, maskierst du ihn als \_.Was ist eine Arbitrary Property?
Eine Klasse in der Form
[property:value] für CSS-Eigenschaften ohne Tailwind-Utility, z. B. [mask-type:luminance].Funktioniert das mit Tailwind v3 und v4?
Ja, die Bracket-Syntax ist in beiden Versionen gleich. Tailwind v4 akzeptiert für CSS-Variablen außerdem die Kurzschreibweise
(--var).Warum steht „color:“ in meiner Klasse?
Das ist ein Type Hint. Er sagt Tailwind, dass ein
var()-Wert eine Farbe ist, sodass color statt font-size generiert wird.Kann ich Tailwind Arbitrary Values Generator als Web-App installieren und offline nutzen?
Ja. Tailwind Arbitrary Values 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.