Comment utiliser : Générateur de valeurs arbitraires Tailwind
- Collez une ou plusieurs déclarations CSS (un bloc de règle complet fonctionne aussi).
- Ajoutez éventuellement une variante telle que
md:ouhover:. - Copiez toutes les classes d’un coup, ou une par une depuis le tableau.
Que sont les valeurs arbitraires Tailwind ?
Lorsqu’un design nécessite une valeur absente de votre thème Tailwind, vous pouvez l’écrire directement entre crochets : w-[372px], bg-[#1da1f2], grid-cols-[1fr_200px_auto]. Pour les propriétés CSS pour lesquelles Tailwind n’a aucun utilitaire, utilisez une propriété arbitraire : [clip-path:polygon(0_0,100%_0,100%_85%,0_100%)].
Les règles de syntaxe gérées par cet outil
- Pas d’espaces : les noms de classes ne peuvent pas contenir d’espaces, donc les espaces deviennent des tirets bas —
1fr 200px auto→1fr_200px_auto. Les espaces après les virgules sont simplement supprimés. - Indications de type : certains utilitaires sont ambigus avec les variables CSS (
text-[var(--x)]est-il une couleur ou une taille ?). L’outil ajoute des indications telles quetext-[color:var(--brand)]outext-[length:var(--size)]. - !important : devient le préfixe
!. - Propriétés non prises en charge comme
mask-imageouclip-pathsont générées sous forme de propriétés arbitraires.
Quand ne pas utiliser les valeurs arbitraires
Les valeurs arbitraires conviennent parfaitement aux cas ponctuels. Si la même valeur apparaît à plusieurs endroits, ajoutez-la plutôt à votre thème — pour les couleurs, utilisez les outils Variables CSS vers Tailwind ou Générateur de couleurs Tailwind — afin qu’elle reste cohérente et lisible.
Aussi recherché comme : valeurs arbitraires tailwind, crochets tailwind, css vers tailwind, grid-cols-[], propriétés arbitraires, valeurs personnalisées tailwind.
Outils complémentaires : Générateur de valeurs arbitraires Tailwind
- Générateur de glassmorphism — Concevez une carte en verre dépoli avec des curseurs en direct et copiez un CSS compatible avec tous les navigateurs, avec le préfixe -webkit-backdrop-filter et une solution de repli pour les anciens navigateurs.
- 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.
- Formateur CSS — Transformez une feuille de style minifiée en CSS lisible, avec une propriété par ligne et des blocs @media correctement imbriqués.
- Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.
Questions fréquentes
Comment écrire des espaces dans les valeurs arbitraires Tailwind ?
Utilisez des tirets bas :
grid-cols-[1fr_auto]. Tailwind les reconvertit en espaces. Pour utiliser un vrai tiret bas, échappez-le sous la forme \_.Qu’est-ce qu’une propriété arbitraire ?
Une classe de la forme
[property:value] pour les propriétés CSS sans utilitaire Tailwind, par exemple [mask-type:luminance].Cela fonctionne-t-il avec Tailwind v3 et v4 ?
Oui, la syntaxe entre crochets est identique dans les deux versions. Tailwind v4 accepte aussi la forme abrégée
(--var) pour les variables CSS.Pourquoi y a-t-il « color: » dans ma classe ?
C’est une indication de type. Elle indique à Tailwind qu’une valeur
var() est une couleur, afin qu’il génère color au lieu de font-size.Puis-je installer Générateur de valeurs arbitraires Tailwind en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur de valeurs arbitraires Tailwind 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.