Tailwind CSS : Configurer Tailwind avec React

1. créez votre dossier de projet

Ouvrez le terminal et naviguez dans votre projet créé, puis exécutez la commande ci-dessous
npx créer-réagir-app réagir-démo.

Une fois l’application reactdemo créée,

>> aller dans le dossier react-demo

>> exécutez la commande « npm start »

2. Installez Tailwind CSS et générez le fichier de configuration

>> npm install -D tailwindcss
>> npx tailwindcss init

Votre dossier et votre fichier package.json devraient ressembler à ceci dans votre VSCode :‌

3. Configurez vos chemins de modèle

Ajoutez les chemins d’accès à tous vos fichiers de modèle dans votre fichier tailwind.config.js.

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

votre fichier devrait maintenant ressembler à ceci :

4. Ajoutez les directives Tailwind à votre CSS

Ajoutez les directives @tailwind pour chacune des couches de Tailwind à votre fichier ./src/index.css.

@base de vent arrière ;
@composants tailwind ;
utilitaires @tailwind ;

votre fichier devrait maintenant ressembler à ceci :

Rédaction CSS :

Vous pouvez commencer à utiliser les classes utilitaires de Tailwind pour styliser votre contenu. Accédez à votre fichier App.jsx, où vous devriez voir ceci ci-dessous :

Sortir

Note: si votre propriété CSS tailwind n’est pas répercutée sur l’application, redémarrez votre application de réaction.

Conclusion:

Vous pouvez maintenant développer votre application réactive avec CSS React et Tailwind. Pour plus d’exploration, vous pouvez passer par ici. Merci d’avoir lu cet article; J’espère que vous trouverez cela utile.

TROUVÉ CELA UTILE ? PARTAGEZ-LE