Cet outil exécute-t-il le moteur complet de Tailwind CSS ?

Non, il s'agit d'un analyseur hors ligne dédié spécifiquement à la syntaxe des valeurs arbitraires.

Puis-je tester des classes statiques comme bg-red-500 ?

Les classes statiques sans crochets sont listées mais ne peuvent pas être développées sans le moteur Tailwind complet.

Comment l'outil gère-t-il les espaces dans les valeurs arbitraires ?

Vous devez utiliser des tirets bas (_) à la place des espaces, par exemple grid-cols-[1fr_2fr_1fr].

Qu'est-ce qu'une indication de type de donnée ?

C'est un préfixe comme length: ou color: dans les crochets qui aide Tailwind à générer la bonne propriété CSS.

Puis-je utiliser des variables CSS dans ce playground ?

Oui, les syntaxes utilisant des variables CSS comme bg-[var(--ma-couleur)] sont parfaitement prises en charge.

Elysia Tools

Navigation mobile

Design

Playground des valeurs arbitraires Tailwind

Collez des classes Tailwind utilisant des valeurs arbitraires (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) et inspectez le CSS généré, avec un aperçu visuel en direct, la détection des indications de type de donnée et une explication de chaque traduction. Utile pour déboguer calc(), les variables CSS et les valeurs ponctuelles hors échelle de jetons.

Détails

Ce que cet outil vous aide à faire

Un playground des valeurs arbitraires Tailwind pour les ingénieurs frontend et les auteurs de design systems :

Collez une ou plusieurs classes Tailwind en syntaxe à crochets (séparées par espace ou retour ligne).
L’analyseur reconnaît trois formes : utilitaire + valeur arbitraire (w-[137px]), propriété arbitraire ([mask-type:luminance]) et sélecteurs de variante arbitraires.
Les indications de type comme text-[length:14px] ou text-[color:var(--brand)] sont détectées et servent à lever l’ambiguïté des préfixes surchargés (text -> couleur vs font-size, bg -> image vs couleur).
Pour chaque classe vous obtenez la règle CSS générée (développée ou compressée), un aperçu visuel en direct et une brève explication.
Les classes statiques sans crochets sont listées mais ne peuvent être développées sans le moteur Tailwind complet — l’outil se concentre sur la soupape des valeurs arbitraires.

Analyseur hors ligne : aucun runtime Tailwind n’est exécuté, donc les utilitaires statiques et les jetons de thème sont volontairement hors périmètre.

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exécutions d’exemple préparées

Cliquez sur un exemple pour remplir automatiquement le formulaire. Les fichiers doivent toujours être téléversés.

2 exemples

Dimensions, calc et fond en dégradé

Plusieurs utilitaires à valeur arbitraire testant le calcul de longueur, une couleur variable CSS et un fond dégradé.

<div class="tav-wrap">…5 classes parsed, each with a live swatch/tile preview and an expanded CSS rule such as .demo { width: 137px; }…</div>

Propriété arbitraire et template de grille

Démontre le raccourci [propriété:valeur] et un template de grille multibande utilisant le tiret bas comme espace.

<div class="tav-wrap">…arbitrary properties mask-type and scroll-snap-type are emitted directly, grid templates collapse underscores into spaces, output is single-line…</div>

Entrées

Renseignez les champs nécessaires, puis lancez l’outil.

5 réglages

ContenuCollez ou saisissez les valeurs principales.1

Classes Tailwind (une par ligne ou séparées par espace)textareaRequis

RéglagesAjustez formats, plages, nombres et modes.2

Style de sortie CSSselectOptionnelThème de l’aperçuselectOptionnel

OptionsActivez ou désactivez les comportements optionnels.2

Afficher l’aperçu en directcheckboxOptionnelActivé si cochéAfficher l’explication CSScheckboxOptionnelActivé si coché

Résultat

Prêt à exécuter

Après exécution, les fichiers, textes, données structurées ou sorties en flux apparaîtront ici.

Exemples

Exemples adaptés à cet outil

Associé

Playground des valeurs arbitraires Tailwind

Ce que cet outil vous aide à faire

Exécuter cet outil

Exécutions d’exemple préparées

Entrées

Résultat

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Exécutions d’exemple préparées

Entrées

Résultat

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Débogage de dimensions et dégradés personnalisés

2. Configuration de grille et propriétés arbitraires

FAQ

Tailwind CSS Samples

Échantillons Audio MP3 Libres de Droits

Exemples SVG

Exemples de Traitement d'Images Android Java

Analyseur d image VP8

Générateur de Graphique en Cascade

Generateur de rapport daudit daccessibilite

Diviseur CSV

Outils de conversion de casse, d’encodage et de normalisation de texte

Outils Text

Outils d’analyse de texte, de lisibilité et d’inspection de contenu

Outils de masquage, de surlignage et de mise en forme de texte