React Tailwind CSS

Utiliser Tailwind CSS dans un projet React est un choix très populaire car il fournit une approche utility-first pour écrire du CSS, vous permettant d'appliquer des styles directement dans les noms de classes. Cette méthode rend la mise en forme plus concise et intuitive.

Tutoriel Tailwind CSS :https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Site officiel de Tailwind CSS :https://tailwindcss.com/

Adresse GitHub :https://github.com/tailwindlabs/tailwindcss

Tailwind CSS est un puissant framework CSS qui rend la mise en forme plus concise et modulaire grâce à une approche utility-first. Contrairement aux frameworks CSS traditionnels basés sur des classes, Tailwind fournit un ensemble de classes utilitaires de bas niveau qui peuvent être utilisées directement sur les éléments HTML pour construire rapidement et avec flexibilité des designs personnalisés.

Voici les étapes détaillées pour utiliser Tailwind CSS dans un projet React.

1. Installer Tailwind CSS

Si vous créez un nouveau projet React à partir de zéro, vous pouvez utiliser create-react-app. Si vous avez déjà un projet React existant, vous pouvez passer l'étape de création du projet.

Créez un nouveau projet React :

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

Installer Tailwind CSS

Exécutez la commande suivante dans le répertoire de votre projet pour installer Tailwind CSS et ses dépendances requises :

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Cela créera un fichier tailwind.config.js et un fichier postcss.config.js.

La structure de votre projet devrait ressembler à ce qui suit :

my-app/
├── node_modules/
├── public/
├── src/
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ...（其他文件）
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
└── tailwind.config.js

2. Configurer Tailwind CSS

Modifiez le fichier tailwind.config.js pour configurer Tailwind afin de purger les styles inutilisés. Mettez à jour le tableau content pour inclure tous les chemins de vos fichiers de modèle :

Exemple

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

3. Ajoutez les styles de base de Tailwind

Dans votre projet, ouvrez le fichier src/index.css et ajoutez le contenu suivant pour inclure les styles de base, les styles de composants et les styles utilitaires de Tailwind :

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

4. Utilisez Tailwind CSS pour écrire des styles

Vous pouvez maintenant commencer à utiliser les noms de classes Tailwind CSS dans vos composants React pour écrire des styles.

Code du fichier App.js :

import React from 'react';

const App = () => {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="bg-white p-8 rounded-lg shadow-lg">
<h1 className="text-2xl font-bold text-gray-900">Bonjour, EXEMPLE!</h1>
<p className="mt-4 text-gray-600">Tutoriel d'exemple : Ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !</p>
<button className="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
Cliquez ici pour essayer
</button>
</div>
</div>
);
};

export default App;

Assurez-vous que votre fichier src/index.js importe correctement le composant App et le rend dans le DOM.

Code du fichier src/index.js :

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Application />
</React.StrictMode>
);

Exécutez :

npm start

Ensuite, ouvrez votre navigateur et accédez à http://localhost:3000. Vous devriez voir une application React simple stylisée avec Tailwind CSS.

Grâce aux étapes ci-dessus, vous avez intégré avec succès Tailwind CSS dans votre projet React et l'avez utilisé pour écrire des styles. Les noms de classes utilitaires de Tailwind CSS vous permettent d'ajouter rapidement des styles à vos composants tout en gardant votre code de style concis et modulaire.

Autres extensions

Projet pratique React