# Tailwind CSS · Veille technologique

[Source canonique](<https://sebastien.rigaux.be/veille/tags/tailwind-css>)

Styles utilitaires et composition d’interfaces avec Tailwind CSS.

## [MicroKit : 54 micro-interactions React, CSS et Tailwind à copier](<https://sebastien.rigaux.be/veille/liens/microkit-54-micro-interactions-react-css-et-tailwind-a-copier>)

MicroKit rassemble des interactions prêtes à copier — boutons animés, onglets, champs et effets au survol — avec des versions React ou CSS et Tailwind. Chaque composant se récupère séparément en JavaScript ou TypeScript, sans installer de package ; 26 des 54 n’ont aucune dépendance, tandis que 28 utilisent lucide-react.

Le code est sous licence MIT et les variantes Tailwind sont prévues pour les versions 3 et 4. Côté Next.js App Router, la plupart des composants restent compatibles avec les server components ; ceux qui utilisent état, ref ou gestionnaire d’événement nécessitent « use client ».

2026-10-29 · [Markdown](<https://sebastien.rigaux.be/veille/liens/microkit-54-micro-interactions-react-css-et-tailwind-a-copier.md>) · [Ressource originale](<https://microkit.co/>)

## [Tailwind CSS : un répertoire de composants, templates et outils](<https://sebastien.rigaux.be/veille/liens/tailwind-css-un-repertoire-de-composants-templates-et-outils>)

All UtilityCSS rassemble des ressources Tailwind CSS gratuites et payantes, classées par type, usage et technologie. Le catalogue présente notamment des composants copiables, des templates, des starters Next.js et des outils de gestion des couleurs, dont plusieurs prennent en charge les formats OKLCH de Tailwind CSS v4.

Le filtrage facilite la recherche de briques adaptées à un projet, mais le répertoire ne garantit pas à lui seul leur qualité ou leur accessibilité : la page conseille de vérifier ces points auprès de chaque ressource.

2026-10-28 · [Markdown](<https://sebastien.rigaux.be/veille/liens/tailwind-css-un-repertoire-de-composants-templates-et-outils.md>) · [Ressource originale](<https://allutilitycss.com/>)

## [ESLint Plugin Tailwind CSS v4 : adapter les règles au nouveau moteur](<https://sebastien.rigaux.be/veille/liens/eslint-plugin-tailwind-css-v4-adapter-les-regles-au-nouveau-moteur>)

Cette version du plugin ESLint pour Tailwind CSS ajoute la compatibilité avec Tailwind v4. La page de release détaille les changements utiles pour conserver des vérifications de classes adaptées après la migration.

2026-07-11 · [Markdown](<https://sebastien.rigaux.be/veille/liens/eslint-plugin-tailwind-css-v4-adapter-les-regles-au-nouveau-moteur.md>) · [Ressource originale](<https://github.com/francoismassart/eslint-plugin-tailwindcss/releases/tag/v4.0.3>)

## [Animata : copier des composants React animés en Tailwind CSS](<https://sebastien.rigaux.be/veille/liens/animata-copier-des-composants-react-animes-en-tailwind-css>)

Animata propose des composants animés à copier dans une application React ou Next.js, avec Tailwind CSS. Son format open source laisse les équipes inspecter et adapter le code à leur interface.

2026-04-18 · [Markdown](<https://sebastien.rigaux.be/veille/liens/animata-copier-des-composants-react-animes-en-tailwind-css.md>) · [Ressource originale](<https://animata.design/docs>)

## [Fluid Tailwind CSS : créer des interfaces adaptatives](<https://sebastien.rigaux.be/veille/liens/fluid-tailwind-css-creer-des-interfaces-adaptatives>)

Ce plugin ajoute des classes Tailwind CSS pour définir des valeurs fluides entre plusieurs tailles d’écran. Il permet de garder les ajustements typographiques et d’espacement dans le vocabulaire utilitaire du projet.

2026-03-26 · [Markdown](<https://sebastien.rigaux.be/veille/liens/fluid-tailwind-css-creer-des-interfaces-adaptatives.md>) · [Ressource originale](<https://github.com/nguyenviet02/fluid-tailwindcss>)

## [Tailwind Clamp : utiliser \`clamp()\` avec des classes Tailwind](<https://sebastien.rigaux.be/veille/liens/tailwind-clamp-utiliser-clamp-avec-des-classes-tailwind>)

Tailwind Clamp expose des valeurs CSS `clamp()` sous forme de classes utilitaires. Le plugin facilite la création d’échelles fluides de taille ou d’espacement sans multiplier les breakpoints.

2026-03-26 · [Markdown](<https://sebastien.rigaux.be/veille/liens/tailwind-clamp-utiliser-clamp-avec-des-classes-tailwind.md>) · [Ressource originale](<https://github.com/nicolas-cusan/tailwind-clamp>)

## [Étendre la zone cliquable d’un contrôle avec Tailwind CSS](<https://sebastien.rigaux.be/veille/liens/etendre-la-zone-cliquable-d-un-controle-avec-tailwind-css>)

Cet exemple rassemble des classes Tailwind CSS qui agrandissent la zone interactive d’un élément sans modifier son apparence. Cette technique aide à rendre les contrôles plus faciles à toucher, notamment sur mobile.

2026-03-15 · [Markdown](<https://sebastien.rigaux.be/veille/liens/etendre-la-zone-cliquable-d-un-controle-avec-tailwind-css.md>) · [Ressource originale](<https://bazza.dev/craft/2026/hit-area>)

## [Skeleton : organiser thèmes et composants autour de Tailwind](<https://sebastien.rigaux.be/veille/liens/skeleton-organiser-themes-et-composants-autour-de-tailwind>)

Skeleton ajoute à Tailwind un système de thèmes et des composants basés sur Zag.js. La documentation présente une base de design commune utilisable notamment avec Svelte et React.

2025-10-19 · [Markdown](<https://sebastien.rigaux.be/veille/liens/skeleton-organiser-themes-et-composants-autour-de-tailwind.md>) · [Ressource originale](<https://www.skeleton.dev/docs/svelte/get-started/introduction>)

## [Sera UI : des composants React et Next.js personnalisables](<https://sebastien.rigaux.be/veille/liens/sera-ui-des-composants-react-et-next-js-personnalisables>)

Sera UI rassemble des composants JSX et blocs d’interface stylés avec Tailwind CSS. La collection fournit une base modulable pour formulaires, dashboards et pages web.

2025-10-07 · [Markdown](<https://sebastien.rigaux.be/veille/liens/sera-ui-des-composants-react-et-next-js-personnalisables.md>) · [Ressource originale](<https://seraui.com/>)

## [Animate UI : installer puis personnaliser des composants animés](<https://sebastien.rigaux.be/veille/liens/animate-ui-installer-puis-personnaliser-des-composants-animes>)

Animate UI distribue des composants React construits avec TypeScript, Tailwind CSS et Motion. Le code peut être installé via la CLI shadcn puis adapté au projet.

2025-06-18 · [Markdown](<https://sebastien.rigaux.be/veille/liens/animate-ui-installer-puis-personnaliser-des-composants-animes.md>) · [Ressource originale](<https://github.com/imskyleen/animate-ui>)

## [Onlook : modifier visuellement une interface Next.js et Tailwind](<https://sebastien.rigaux.be/veille/liens/onlook-modifier-visuellement-une-interface-next-js-et-tailwind>)

Onlook propose un éditeur visuel qui travaille sur le code de l’application. Le dépôt présente l’édition de pages et de styles directement depuis le navigateur, avec assistance IA.

2025-01-29 · [Markdown](<https://sebastien.rigaux.be/veille/liens/onlook-modifier-visuellement-une-interface-next-js-et-tailwind.md>) · [Ressource originale](<https://github.com/onlook-dev/onlook>)

## [Uiverse : explorer des éléments d’interface réutilisables](<https://sebastien.rigaux.be/veille/liens/uiverse-explorer-des-elements-d-interface-reutilisables>)

Uiverse rassemble des éléments d’interface créés par la communauté, avec du code HTML/CSS, Tailwind ou React. Une ressource pour étudier des styles et adapter des composants à son projet.

2024-10-13 · [Markdown](<https://sebastien.rigaux.be/veille/liens/uiverse-explorer-des-elements-d-interface-reutilisables.md>) · [Ressource originale](<https://uiverse.io/>)

## [Inline Fold : alléger l’affichage des classes dans VS Code](<https://sebastien.rigaux.be/veille/liens/inline-fold-alleger-l-affichage-des-classes-dans-vs-code>)

Inline Fold masque temporairement des portions de code sur une seule ligne, notamment les longues valeurs d’attributs Tailwind. Les expressions de ciblage et le masque restent configurables.

2024-01-08 · [Markdown](<https://sebastien.rigaux.be/veille/liens/inline-fold-alleger-l-affichage-des-classes-dans-vs-code.md>) · [Ressource originale](<https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold>)

## [TW Classed : composer des variantes de composants Tailwind](<https://sebastien.rigaux.be/veille/liens/tw-classed-composer-des-variantes-de-composants-tailwind>)

TW Classed permet de définir des composants réutilisables avec variantes typées et styles extensibles. Les variantes composées évitent de répéter les mêmes combinaisons de classes dans chaque vue.

2023-10-16 · [Markdown](<https://sebastien.rigaux.be/veille/liens/tw-classed-composer-des-variantes-de-composants-tailwind.md>) · [Ressource originale](<https://tw-classed.vercel.app/>)
