# 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. > Page canonique: https://elysiatools.com/fr/tools/tailwind-arbitrary-value-playground - **Catégorie:** Design - **Mots-clés:** tailwind, valeur arbitraire, playground tailwind, w-\[..\], tailwind css, classe utilitaire, générateur css, calc(), syntaxe à crochets tailwind, frontend, design responsive, variable css, jeton de design ## Présentation Un playground des valeurs arbitraires Tailwind pour les ingénieurs frontend et les auteurs de design systems : 1. Collez une ou plusieurs classes Tailwind en syntaxe à crochets (séparées par espace ou retour ligne). 2. L’analyseur reconnaît trois formes : utilitaire + valeur arbitraire (w-[137px]), propriété arbitraire ([mask-type:luminance]) et sélecteurs de variante arbitraires. 3. 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). 4. 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. 5. 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. ## Entrées - **Classes Tailwind (une par ligne ou séparées par espace)** (textarea): w-\[137px\] h-\[calc(100vh-4rem)\] text-\[#bada55\] bg-\[url(/hero.png)\] grid-cols-\[1fr_2fr_1fr\] \[mask-type:luminance\] \[&:hover\]:text-\[#ff0000\] - **Style de sortie CSS** (select) - **Thème de l’aperçu** (select) - **Afficher l’aperçu en direct** (checkbox) - **Afficher l’explication CSS** (checkbox) ## Quand l'utiliser - Lorsque vous devez déboguer des calculs complexes avec calc() ou des variables CSS dans vos classes Tailwind. - Pour vérifier la validité et le rendu CSS de propriétés ou de variantes arbitraires avant de les intégrer dans votre code. - Pour lever l'ambiguïté de préfixes surchargés en utilisant des indications de type comme text-\[length:...\] ou bg-\[color:...\]. ## Fonctionnement - Saisissez ou collez vos classes Tailwind contenant des crochets dans la zone de texte, séparées par des espaces ou des retours à la ligne. - Choisissez le style de sortie CSS (développé ou compressé) et configurez le thème de l'aperçu visuel. - L'analyseur extrait les utilitaires, détecte les types de données et génère les règles CSS correspondantes. - Visualisez instantanément le résultat dans le panneau d'aperçu et lisez l'explication détaillée pour chaque classe traduite. ## Cas d'usage - Validation rapide de grilles CSS complexes définies via grid-cols-\[...\]. - Prototypage de dégradés de couleurs ou de dimensions spécifiques hors échelle de jetons standard. - Apprentissage et enseignement de la syntaxe des propriétés et variantes arbitraires de Tailwind. ## Questions fréquentes ### 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. ## Outils associés - [Analyseur d image VP8](https://elysiatools.com/fr/tools/vp8-image-analyzer): Analyse une image WebP/VP8 avec Sharp, genere une displacement map en niveaux de gris et rend un relief 3D avec Three.js - [Générateur de Graphique en Cascade](https://elysiatools.com/fr/tools/waterfall-chart-generator): Créer des graphiques en cascade pour visualiser les changements cumulatifs avec distinction des valeurs positives/négatives et affichage des sous-totaux - [Generateur de rapport daudit daccessibilite](https://elysiatools.com/fr/tools/accessibility-audit-report-generator): Audite du HTML ou une URL pour detecter des problemes WCAG courants et exporte un PDF structure - [Diviseur CSV](https://elysiatools.com/fr/tools/csv-splitter): Diviser le contenu CSV par nombre de lignes spécifié. Parfait pour traiter de grands ensembles de données, diviser les données pour analyse, traitement par lots et gérer les limites de taille de fichier. Caractéristiques: - Diviser CSV par nombre de lignes - Support pour plusieurs formats de sortie - Préserver la ligne d'en-tête dans chaque division - Options flexibles de format de sortie - Support pour grands ensembles de données - Traitement rapide et efficace Cas d'Usage Communs: - Diviser de grands fichiers CSV pour traitement - Diviser les données pour traitement parallèle - Créer des blocs de données gérables - Exporter des données dans différents formats - Préparer les données pour opérations par lots - Gérer les limitations de taille de fichier - [Inspecteur de fichiers de police (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/fr/tools/font-file-inspector): Téléversez une police TTF, OTF, WOFF ou WOFF2 (WOFF2 décompressée automatiquement) et inspectez toutes les métadonnées : famille/sous-famille/designer/copyright/version, nombre de glyphes, unitsPerEm, graisse et largeur, angle italique, drapeaux de style et boîte englobante ; carte thermique de couverture par blocs Unicode ; aperçu SVG des glyphes (texte personnalisable, échantillonnage auto pour les fontes d'icônes) ; ligatures liga et fonctionnalités OpenType ; axes fvar et instances nommées des fontes variables. - [Extracteur de texte barre PDF](https://elysiatools.com/fr/tools/pdf-strikethrough-review-extractor): Detecte le texte barre dans les PDF de revision et genere un rapport pour contrats et brouillons - [Générateur de Graphique Radar](https://elysiatools.com/fr/tools/radar-chart-generator): Générer des graphiques radar personnalisables à partir de données, parfait pour la comparaison et l'analyse multidimensionnelle - [Générateur de Graphique d'Araignée](https://elysiatools.com/fr/tools/spider-chart-generator): Générer des graphiques d'araignée simplifiés (radar) pour la comparaison et l'analyse de données multidimensionnelles ## Exemples - [Tailwind CSS Samples](https://elysiatools.com/fr/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations - [Échantillons Audio MP3 Libres de Droits](https://elysiatools.com/fr/samples/mp3-samples): Collection d'échantillons audio libres de droits pour les tests et le développement, incluant les sons de la nature, la musique de méditation et l'audio ambiant - [Exemples SVG](https://elysiatools.com/fr/samples/svg-samples): Exemples de graphiques vectoriels évolutifs (SVG) démontrant diverses fonctionnalités et techniques SVG - [Exemples de Traitement d'Images Android Java](https://elysiatools.com/fr/samples/android-image-processing-java): Exemples de traitement d'images Android Java incluant lecture/écriture, mise à l'échelle et conversion de format ## Contenu associé - [Outils de conversion de casse, d’encodage et de normalisation de texte](https://elysiatools.com/fr/hubs/text-convert): Comparez les outils de conversion de casse, de largeur de caractères, d’encodage, de quoted-printable et de normalisation de texte dans un hub unique. - [Outils Text](https://elysiatools.com/fr/hubs/text-utility): Découvrez 33 outils text pour des workflows de utility et comparez rapidement des utilitaires proches. - [Outils d’analyse de texte, de lisibilité et d’inspection de contenu](https://elysiatools.com/fr/hubs/text-analyze): Comparez statistiques de texte, détection de langue, score de lisibilité, analyse de sentiment, revue de modération et analyse de motifs dans un hub unique. - [Outils de masquage, de surlignage et de mise en forme de texte](https://elysiatools.com/fr/hubs/text-format): Comparez les outils de masquage de texte sensible, de détection de PII, de normalisation de numéros, de surlignage, de centrage et de formatage de diff dans un hub unique.