Du JavaScript Vanilla pour Tailwind Plus : la version qui change la donne
1. Une évolution attendue
Jusqu’à présent, les blocs d’interface de Tailwind Plus — dialogues, menus déroulants, palettes de commande, etc. — nécessitaient du JavaScript spécifique, en particulier si vous n’utilisez ni React ni Vue. Les exemples HTML étaient statiques : ils ne reflétaient pas le comportement dynamique attendu, obligeant les développeurs à écrire eux-mêmes tout le JS associé.
Mais depuis le 25 juillet 2025, cette limitation disparaît : tous les blocs UI de Tailwind Plus sont désormais entièrement fonctionnels, accessibles et interactifs, y compris dans les exemples HTML purs .
2.@tailwindplus/elements : la bibliothèque qui rend tout possible
Derrière cette avancée se trouve la nouvelle librairie @tailwindplus/elements, disponible uniquement pour les utilisateurs de Tailwind Plus :
- Il s’agit d’une collection de custom elements headless, conçus pour encapsuler le comportement interactif nécessaire — dialogs, dropdowns, tabs, command palette, etc. .
- Elle fonctionne sans framework, via une simple balise
- Le résultat : des composants interactifs prêts à l’emploi, que vous pouvez styliser à volonté avec Tailwind ou votre CSS personnalisé
3. Fonctionnalités prises en charge
La première version de Elements comprend :
- Autocomplete (pour créer des combobox personnalisées)
- Command palette
- Dialog (modales, drawers, etc.)
- Disclosure (accordéons, menus mobiles)
- Dropdown menu
- Popover
- Select
- Tabs
Ces primitives vous permettent d’ajouter des interactions complexes à vos blocs UI sans toucher aux frameworks comme React ou Vue.
4. Des technologies web modernes au service de la performance
La nouvelle librairie exploite les fonctionnalités modernes du web pour garder le code léger et natif :
- Custom elements pour une abstraction inter-plateforme
- Attributs comme popover et beforetoggle pour gérer la logique d’affichage et de transitions
- Élément natif
- Invoker commands pour activer/désactiver des comportements de manière déclarative
- ElementInternals pour intégrer les formulaires dans les contrôles personnalisés
À cela s’ajoutent les polyfills nécessaires pour assurer la compatibilité avec tous les navigateurs supportés par Tailwind CSS v4.0. Et au fil du temps, Elements ne fera que s’alléger .
5. Compatible partout, pour tous
Un des grands avantages est l’universalité : HTML restant le dénominateur commun de tous les frameworks, Elements rend les blocs UI de Tailwind Plus utilisables quel que soit le contexte — Svelte, Astro, Laravel, brut HTML, etc.
Par exemple, voici comment intégrer un combobox avec liaison bidirectionnelle dans Svelte :
…Leslie Alexander Votre composant reste léger, stylisé à la main, tout en étant pleinement interactif — sans dépendances externes .
6. Pourquoi c’est une bonne nouvelle ?
- ✅ Diminution de la dette technique : plus besoin de réécrire le même comportement JavaScript à chaque fois.
- ⚡ Rapidité de mise en œuvre, même dans des mini-projets sans framework.
- 🌍 Accès universel, sans contrainte d’adopter un framework spécifique.
- 🎨 Flexibilité de style, avec la puissance des classes utilitaires Tailwind.
7. En résumé
Tailwind Plus passe à la vitesse supérieure en donnant enfin accès à des blocs UI interactifs en HTML pur, grâce à @tailwindplus/elements. Fini les composants statiques ou les scripts ad hoc : vous intégrez des interfaces complexes, accessibles et élégantes sans dépendre de React ou Vue.
Pour les utilisateurs de Tailwind Plus, cette mise à jour est un vrai tournant : le 25 juillet 2025 marque l’arrivée d’un Tailwind vraiment utilisable « vanilla » et réutilisable partout . Allez découvrir la nouvelle documentation et commencez à tester dès aujourd’hui 🚀.
Cet article s’appuie sur les informations publiées par le blog officiel de Tailwind CSS et les annonces récentes de l’équipe de développement.
