Configurer Tailwind CSS dans un projet React JS

Si vous n'avez pas déjà d'application React, créez-en une :

npx create-react-app my-app
cd my-app

1. Installer Tailwind CSS Exécutez la commande suivante pour installer Tailwind CSS et ses dépendances :

npm install -D tailwindcss postcss autoprefixer

Ensuite, initialisez Tailwind CSS :

npx tailwindcss init

Cela créera un fichier tailwind.config.js dans votre projet.

1. Configurer Tailwind Modifiez le fichier tailwind.config.js pour configurer les chemins de contenu. Remplacez la clé de contenu par ce qui suit :

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

1. Ajouter des directives Tailwind au CSS Dans le dossier src, recherchez ou créez un fichier appelé index.css. Ajoutez les directives Tailwind suivantes :

@tailwind base;
@tailwind components;
@tailwind utilities;

1. Importer du CSS dans React Assurez-vous que index.css est importé dans votre projet. Dans le fichier src/index.js, vous devriez avoir :

import './index.css';

1. Démarrez le serveur de développement Exécutez votre application React pour voir Tailwind CSS en action :

npm start

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!