Skip to main content

Tailwind CSS

Ce document présente les bonnes pratiques et conventions à suivre lors de l'utilisation de Tailwind CSS.

1. Installation​

  • Assurez-vous d'avoir la dernière version de Tailwind CSS installée:
  npm install -D tailwindcss
  npx tailwindcss init

2. Personnalisation du thème​

Ajoutez des couleurs, espacements, etc., en modifiant tailwind.config.js via la clé extend:

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: "#3490dc",
            },
        },
    },
};

3. Définir les polices de caractères​

Pour personnaliser les polices, vous pouvez les définir dans le fichier tailwind.config.js sous la clé theme.extend.fontFamily.

Exemple :​

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'Arial', 'sans-serif'], // Police principale
        serif: ['Merriweather', 'serif'], // Police pour les titres
        mono: ['Courier New', 'monospace'], // Police monospace
      },
    },
  },
};
info

Astuce : Ajoutez vos polices via Google Fonts ou importez-les directement dans votre CSS :

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

Nombre recommandé de font-family :​

2 à 3 font-family au maximum :

  • Une pour les titres (headings).
  • Une pour le corps du texte (paragraphes).
  • (Optionnel) Une troisième pour des accents spécifiques ou des besoins uniques.

4. Définir les tailles de police​

Personnalisez les tailles de police dans le fichier tailwind.config.js sous theme.extend.fontSize.

Exemple :​

module.exports = {
  theme: {
    extend: {
      fontSize: {
        xs: ['12px', '16px'], // Petite taille (12px avec un interlignage de 16px)
        sm: ['14px', '20px'], // Taille petite
        base: ['16px', '24px'], // Taille standard
        lg: ['18px', '28px'], // Légèrement grand
        xl: ['20px', '32px'], // Grande taille
        '2xl': ['24px', '36px'], // Très grande taille
        '3xl': ['32px', '48px'], // Titres principaux
        '4xl': ['40px', '56px'], // Très grand titre
      },
    },
  },
};

Bonnes pratiques​

  • Mobile first : Ajustez les tailles avec des classes responsives (ex. : sm:text-sm, lg:text-xl).
  • Accessibilité : Ne descendez pas en dessous de text-sm pour les principaux blocs de texte.
  • Constance visuelle : Combinez la taille de police avec des styles comme font-semibold, tracking-wide, ou leading-tight.

Exemple responsive combiné :​

<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold">
  Titre responsive pour s'adapter aux écrans
</h1>
<p class="text-base sm:text-lg text-gray-700">
  Texte standard qui reste clair et agréable à lire sur tous les appareils.
</p>

5. Utilisation dans votre HTML​

Voici un exemple d’utilisation de vos polices et tailles définies dans le tailwind.config.js :

<div class="font-sans text-base text-gray-700">
  <h1 class="font-serif text-4xl text-black">Titre principal</h1>
  <p class="font-mono text-sm">
    Ceci est un exemple de typographie personnalisée avec Tailwind CSS.
  </p>
</div>

6. Recommendations​

Design responsive​

  • Utilisez les classes responsives de Tailwind pour un design mobile-first :
tip

Yep

<div class="font-sans text-base text-gray-700">
  <h1 class="font-serif text-4xl text-black">Titre principal</h1>
  <p class="font-mono text-sm">
    Ceci est un exemple de typographie personnalisée avec Tailwind CSS.
  </p>
</div>

Éviter les styles inline​

danger

Nope

Évitez les styles inline (ex. : style="color: red;") lorsque Tailwind propose une classe utilitaire.

Composants et réutilisabilité​

Pour des styles cohérents, créez des composants réutilisables avec @apply :

 .btn-primary {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600;
}

Utilisez-les dans votre HTML :

<button class="btn-primary">Cliquez ici</button>

Mot de fin​

Respectez ces bonnes pratiques pour garder vos projets Tailwind CSS :

  • Clairs
  • Efficaces
  • Maintenables

En appliquant ces principes, vous assurerez une meilleure lisibilité, une expérience utilisateur optimale et un code plus facile à maintenir.