10 astuces Tailwind CSS pour de meilleures interfaces

Tailwind CSS a transformé la manière de styliser les applications web. Voici dix conseils pour gagner en efficacité.

1. Utiliser l’utilitaire cn

Combinez les classes de façon conditionnelle avec l’utilitaire cn :

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

2. Harmoniser les espacements

Utilisez une échelle d’espacement cohérente :

<div className="flex flex-col gap-4">
  <Card />
  <Card />
</div>

3. Concevoir d’abord pour le mobile

Adoptez une approche mobile-first :

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  {/* Contenu */}
</div>

4. Utiliser des variables CSS pour les thèmes

Tailwind v4 simplifie la gestion des thèmes :

@theme {
  --color-primary: #3b82f6;
  --color-background: #ffffff;
}

5. Regrouper les états de survol

Utilisez la classe group pour coordonner le survol entre parent et enfant :

<div className="group">
  <span className="group-hover:text-primary">Survolez-moi</span>
</div>

6. Utilitaires d’animation

Créez des animations fluides :

<button className="transition-all duration-200 hover:scale-105">
  Cliquez ici
</button>

7. États de focus accessibles

Prévoyez toujours des styles de focus :

<button className="focus:ring-primary focus:ring-2 focus:outline-none">
  Bouton accessible
</button>

8. Utiliser @apply avec parcimonie

Préférez la composition de composants à @apply.

9. Prendre en charge le mode sombre

Le mode sombre s’ajoute simplement :

<div className="bg-white dark:bg-gray-900">{/* Contenu */}</div>

10. Créer des extensions

Étendez Tailwind avec des extensions pour réutiliser vos motifs d’interface.