// Logiciel / Outil

Tailwind CSS

Utility-first depuis v2. Tailwind 4 en CSS-first natif Vite — le bon outil pour ship vite.

Catégorie
Logiciel / Outil
Expérience
3 ans
Site officiel
↗ tailwindcss.com

Tailwind est l’outil CSS qui m’a libéré du va-et-vient entre .css et .html. Tailwind 4, avec sa config CSS-first et son plugin Vite natif, signe la maturité du modèle.

Pourquoi Tailwind plutôt que d’autres

  • Utility-first : pas de naming hell, pas de cascade qui surprend.
  • JIT : seules les classes utilisées finissent dans le bundle final (typiquement 10-40 kB gz).
  • Config CSS-first (v4) : tokens via @theme, plugins via @plugin, plus de tailwind.config.js.
  • @source directive : on déclare où Tailwind scanne (Twig templates, fichiers PHP, JSX), pas besoin de purge config compliquée.

Mes patterns Tailwind

  • Composants Twig plutôt que @apply : <x:button variant="primary"> au lieu de .btn { @apply ... }.
  • Theme tokens dédiés au branding : --color-brand-bg, --color-brand-accent, etc. dans @theme.
  • Plugin typography activé sur les articles de blog pour styler les .prose.
  • Dark mode géré via data-theme ou la palette directement quand le site est dark-only.

Stack adjacente

PostCSS pour les ajustements custom, @tailwindcss/typography pour les pages de contenu, @tailwindcss/forms quand pertinent. Pas de Sass / Less en surcouche : ça redevient inutile.

Besoin d’un design system Tailwind ? Demande un devis.