React et Tailwind CSS

Introduction à TailwindCSS

TailwindCSS est un framework CSS utilitaire qui permet de concevoir des interfaces utilisateur directement dans vos composants avec des classes pré-définies. Contrairement au CSS traditionnel où vous devez définir manuellement vos styles dans des fichiers séparés, TailwindCSS vous permet d'appliquer des styles en utilisant des classes utilitaires dans votre HTML ou JSX.

Comparaison entre TailwindCSS et le CSS traditionnel

1. Déclaration des styles :

2. CSS traditionnel :

   • Vous définissez les styles dans un fichier CSS externe puis vous les appliquez aux éléments HTML via des classes.

     /* styles.css */
     .button {
       background-color: #3490dc;
       color: white;
       padding: 10px 20px;
       border-radius: 5px;
     }
     

   // React Component
   <button className="button">Click me</button>
   

3. Avec TailwindCSS :

   • Les styles sont appliqués directement dans le JSX avec des classes utilitaires.

     <button className="bg-blue-500 text-white py-2 px-4 rounded">Click me</button>
     

Ici, au lieu d'utiliser une classe CSS définie ailleurs, Tailwind fournit des classes comme bg-blue-500 pour la couleur de fond, text-white pour le texte blanc, py-2 pour le padding vertical, etc.

1. Gestion des Responsives :

2. CSS traditionnel :

   • Les media queries sont utilisées pour rendre le design responsive.

     .button {
       padding: 10px 20px;
     }
     @media (min-width: 768px) {
       .button {
         padding: 15px 30px;
       }
     }
     

3. Avec TailwindCSS :

   • Les classes Tailwind sont modulaires et gèrent le responsive via des préfixes comme md:, lg:.

     <button className="py-2 px-4 md:py-4 md:px-8">Click me</button>
     

4. Personnalisation des styles :

5. CSS traditionnel :

   • Vous avez la flexibilité complète de créer n'importe quel style que vous souhaitez dans un fichier CSS.
   • Si vous avez un style spécifique non disponible dans Tailwind, vous pouvez personnaliser la configuration ou utiliser la directive @apply pour combiner des utilitaires.

6. Avec TailwindCSS :

   • Tailwind peut être étendu via le fichier de configuration tailwind.config.js pour personnaliser les couleurs, espacements, typographies, etc.

     module.exports = {
       theme: {
         extend: {
           colors: {
             primary: '#ff6363',
           },
         },
       },
     }
     

7. Avantages et Inconvénients :

8. CSS traditionnel :

   • Avantages : Flexible, déjà bien établi.
   • Inconvénients : Peut devenir difficile à maintenir avec de grands projets, duplication de code, comment nommer les classes, etc.

9. TailwindCSS :

   • Avantages : Rapide, utilisation directe dans le JSX, élimination des styles inutilisés lors du build, facile à personnaliser.
   • Inconvénients : Peut sembler verbeux au début, nécessite d'apprendre les classes utilitaires.

Installation de TailwindCSS

Installation de Vite

1. Situez vous dans le dossier où vous désirez créer l’application (le dossier de l’application sera automatiquement créé à la prochaine étape)
2. Exécutez la commande de création d’application :
   
   console

   npm create vite@latest my_app
   

3. Suivez les instructions et choisir React et TypeScript
4. Une fois l’application générée, déplacez-vous dans le dossier créé :
   
   console

   cd my_app
   

5. Exécutez l’application en utilisant les commandes suivantes :
   
   console

   npm install
   npm run dev
   

Installation de Tailwind CSS

1. Installez Tailwind CSS en utilisant la commande suivante :
   
   console

   npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
   

2. Créez un fichier de configuration Tailwind CSS en utilisant la commande suivante :
   
   console

   npx tailwindcss init -p
   

3. Configurer les chemins des fichiers CSS dans le fichier tailwind.config.js :
   
   tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   export default {
   content: [
       "./index.html",
       "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
       extend: {},
   },
   plugins: [],
   }
   

4. Ajouter les imports de Tailwind CSS dans le fichier index.css :
   
   index.css

   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';
   

5. Démarrez l'application en utilisant la commande suivante :
   
   console

   npm run dev
   

6. Tailwind CSS est maintenant installé et prêt à être utilisé dans votre application React.

Manuel

Documentation officielle Tailwind CSS

Manuel

Feuille de triche TailwindCSS

Extensions VSCode recommandées pour TailwindCSS

1. Tailwind CSS IntelliSense : Cette extension offre de l'auto-complétion pour les classes Tailwind, ainsi que la documentation en survolant les classes dans votre code.

2. Lien vers l'extension

3. PostCSS Language Support : Nécessaire si vous utilisez Tailwind avec PostCSS, cette extension vous aidera à gérer vos fichiers CSS de manière efficace.

4. Lien vers l'extension

5. Headwind : Cet outil trie automatiquement vos classes Tailwind dans un ordre logique. Cela rend votre code plus lisible.

6. Lien vers l'extension

7. Prettier - Code formatter : Utilisez cette extension pour vous assurer que votre code React, y compris les classes Tailwind, est bien formaté.

8. Lien vers l'extension

Personnages avec TailwindCSS

personnage.component.tsx

interface IPersonnageProps {
  nom: string;
  photo: string;
  adresse: string;
}

const Personnage = (props: IPersonnageProps) => {
  return (
    <div className="max-w-sm w-72 mx-auto flex flex-col text-center items-center bg-white text-black p-5 border border-gray-300 rounded shadow-md">
      <div className="text-center mb-5">
        <img className="w-36 h-36 rounded-full" src={props.photo} />
      </div>
      <div className="mb-5">
        <span className="italic">{props.nom}</span>
        <div className="italic">{props.adresse}</div>
      </div>
    </div>
  );
};

export default Personnage;

CodeSandbox

Démo - TailwindCSS