Aire de Jeu Tailwind
Écrivez du HTML avec les utilitaires Tailwind CSS v4 et compilez en direct dans votre navigateur.
Qu'est-ce que l'Aire de Jeu Tailwind ?
C'est un éditeur gratuit dans le navigateur où vous écrivez du HTML avec les classes utilitaires Tailwind CSS v4 et voyez le résultat compilé dans un aperçu en direct. Le compilateur officiel Tailwind v4 pour navigateur est intégré à la page.
Mon code est-il envoyé quelque part ?
Non. La compilation se fait entièrement dans votre navigateur avec une copie locale du moteur Tailwind. Votre HTML ne quitte jamais la page et vos brouillons restent dans le localStorage du navigateur.
Quelle version de Tailwind est utilisée ?
Elle utilise Tailwind CSS v4, la dernière version majeure, via le compilateur officiel @tailwindcss/browser. Toutes les utilitaires de base, variantes et le thème par défaut fonctionnent, y compris les valeurs arbitraires entre crochets.
Comment fonctionne l'aperçu en direct ?
Votre HTML est injecté dans un iframe isolé avec le compilateur. Après chaque saisie, les utilitaires sont recompilés après une pause de 500 millisecondes : la frappe reste fluide et l'aperçu toujours à jour.
Comment tester les styles du mode sombre ?
Activez l'interrupteur « Aperçu sombre ». Il ajoute la classe "dark" au document d'aperçu et le compilateur associe la variante dark: à cette classe, ainsi dark:bg-slate-900 réagit immédiatement.
Puis-je voir le CSS généré par Tailwind ?
Oui. Le panneau « CSS compilé » sous les éditeurs affiche exactement la feuille de style produite par le compilateur pour votre balisage, et le bouton « Copier le CSS » la copie dans le presse-papiers.
Que contient le HTML téléchargé ?
Le bouton Télécharger le HTML produit un fichier autonome avec votre balisage et le CSS compilé incorporé dans le head : la page s'affiche correctement hors ligne, sans lien CDN ni connexion.
Y a-t-il des modèles de départ ?
Oui. Le sélecteur de modèles propose une section héros, une grille de cartes responsive et une grille tarifaire à trois paliers, toutes écrites avec les utilitaires v4 actuelles, plus un point de départ minimal vierge.
Comment utiliser Aire de Jeu Tailwind
Cette aire de jeu exécute entièrement sur votre machine le compilateur navigateur officiel de Tailwind CSS v4. Vous tapez du HTML simple avec des classes utilitaires à gauche, le compilateur génère le CSS correspondant dans un iframe d'aperçu isolé, et un panneau en dessous montre la feuille de style exacte produite. Rien n'est envoyé : le compilateur, votre balisage et vos brouillons restent dans le navigateur.
- Choisissez un point de départ dans le sélecteur de Modèle : Hero, Grille de cartes, Tableau de prix ou Vierge ; votre texte est également restauré automatiquement entre les visites.
- Éditez le HTML dans l'éditeur de gauche. Appuyer sur Tab insère deux espaces, et l'aperçu se recompile environ 500 ms après l'arrêt de la frappe.
- Activez Retour à la ligne souple pour contrôler la coupure des lignes, et le sélecteur de taille de police pour régler la taille du texte de l'éditeur.
- Activez Aperçu sombre pour ajouter la classe "dark" au document d'aperçu ; les utilitaires comme dark:bg-slate-900 répondent instantanément.
- Lisez les règles générées dans le panneau CSS compilé et copiez-les avec Copier le CSS quand vous en avez besoin.
- Utilisez Copier le HTML pour le balisage brut, ou Télécharger le HTML pour obtenir un fichier autonome avec le CSS compilé inliné, prêt à ouvrir hors ligne.
Le téléchargement ne contient de vrais styles qu'après au moins une compilation, laissez donc l'aperçu se rendre une fois avant d'exporter. Pour réduire le CSS généré, supprimez du modèle les éléments inutilisés — le panneau reflète toujours exactement ce dont votre balisage actuel a besoin.
Outils associés
- Bac à sable de Code Bac à sable HTML, CSS et JavaScript en ligne avec aperçu en direct, éditeur à numéros de ligne et console capturée. Testez vos extraits instantanément et téléchargez le résultat en fichier HTML - entièrement dans votre navigateur.
- Générateur CSS Grid Générateur visuel gratuit de CSS Grid avec aperçu en direct. Concevez des grilles responsives interactivement et exportez du code CSS prêt pour la production.
- Calculatrice Chmod Calculatrice chmod gratuite en ligne pour visualiser et calculer les permissions de fichiers Linux avec des cases à cocher. Convertissez instantanément entre notation numérique (755, 644) et symbolique (rwxr-xr-x). Supporte les permissions spéciales comme setuid, setgid, sticky bit.
- Table ASCII Référence complète de codage de caractères ASCII avec codes décimaux, hexadécimaux, octaux, binaires, entités HTML et descriptions. Recherche et filtre instantanés.
- Testeur de Requêtes HTTP Testez les APIs REST directement dans votre navigateur. Envoyez des requêtes GET, POST, PUT, DELETE avec des en-têtes, corps et paramètres personnalisés. Voyez le statut, les en-têtes et le corps JSON instantanément.
- Générateur .htaccess Générez des règles .htaccess Apache pour les redirections, réécritures, en-têtes de sécurité, cache et plus.
- Générateur de Robots.txt Générateur gratuit de robots.txt en ligne. Créez et personnalisez des fichiers robots.txt pour contrôler le crawl des moteurs de recherche, gérer l'accès des robots et optimiser le SEO de votre site.
- Générateur de Sitemap Générateur gratuit de sitemap XML en ligne. Ajoutez des URLs, définissez priorités et fréquences, créez des sitemaps SEO instantanément.