Les articles de votre blog ici ? Inscrivez votre blog !

Guide du débutant pour Tailwind CSS dans React

Publié le 16 mars 2022 par Mycamer

Tailwind CSS est un premier framework CSS utilitaire qui permet aux développeurs de concevoir des composants Web personnalisés sans passer à un fichier CSS. Dans ce didacticiel, vous apprendrez à installer Tailwind CSS dans React et à l’utiliser pour créer une page React simple.

Pourquoi utiliser Tailwind CSS ?

Il y a déjà beaucoup de CSS frameworks qui simplifient la façon dont les développeurs conçoivent les pages Web. Alors, pourquoi devriez-vous utiliser Tailwind CSS ?

Les frameworks CSS tels que Bootstrap et Foundation sont des frameworks avisés, ce qui signifie qu’ils fournissent aux développeurs des composants prédéfinis qui ont des styles par défaut. Cela limite à la fois la personnalisation et la créativité, et vous vous retrouvez avec des sites Web qui semblent plutôt génériques.

CSS vent arrière, cependant, est un cadre utilitaire qui vous donne le contrôle créatif pour créer des composants dynamiques. Et contrairement à Bootstrap, vous pouvez facilement personnaliser les conceptions à votre guise.

Un autre avantage de l’utilisation de Tailwind CSS est que vous vous retrouvez avec une petite taille de bundle CSS car il supprime tous les CSS inutilisés pendant le processus de construction (ce qui est différent de Bootstrap, car il inclut tous les fichiers CSS dans la construction).

En savoir plus sur le différences entre Tailwind CSS et Bootstrap de notre article sur le sujet.

Inconvénients de l’utilisation de CSS Tailwind

Tailwind CSS a une courbe d’apprentissage abrupte, même pour les développeurs expérimentés. Il faut un certain temps pour apprendre à utiliser pleinement les classes utilitaires, et vous devrez peut-être vous référer souvent à la documentation. Cependant, après vous être familiarisé avec les classes, vous le trouverez plus facile et plus rapide par rapport au CSS ordinaire.

UTILISEZ LA VIDÉO DU JOUR

La plupart des développeurs aiment suivre le principe de séparation des préoccupations, de sorte que les fichiers CSS et HTML sont écrits dans des fichiers différents. Avec Tailwind CSS, vous écrivez le CSS directement dans le balisage HTML, un inconvénient pour certains.

Même avec ces inconvénients, Tailwind CSS est un framework que vous devriez sérieusement envisager si vous êtes déjà à l’aise avec CSS et que vous souhaitez créer des conceptions plus rapidement.

Premiers pas : Créer un projet React

Exécutez la commande suivante dans le terminal pour échafauder un Réagir application utilisant créer-réagir-app.

npx create-react-app react-tailwind

créer-réagir-app fournit un moyen simple de créer une application React sans configurer d’outils de construction tels que webpack, babel ou linters. Cela signifie que vous vous retrouvez avec un environnement React fonctionnel en quelques minutes.

La commande ci-dessus crée un nouveau dossier nommé réagir-vent arrière. Accédez au dossier et ouvrez-le à l’aide de votre éditeur de texte préféré.

cd react-tailwind

Ensuite, installez Tailwind CSS et configurez-le pour qu’il fonctionne avec l’application React.

Utiliser Tailwind CSS dans React

Installez Tailwind CSS et ses dépendances avec cette commande :

npm install tailwindcss postcss autoprefixer

PostCSS utilise des plugins JavaScript pour rendre CSS compatible avec la plupart des navigateurs. Il vérifie le navigateur dans lequel l’application s’exécute et détermine les polyfills nécessaires pour que votre CSS fonctionne de manière transparente. Autoprefixer est un plugin PostCSS qui utilise des valeurs de caniuse.com pour ajouter automatiquement des préfixes de fournisseur aux règles CSS.

Initialiser Tailwind CSS

Exécutez le initialisation vent arrière commande pour générer les fichiers de configuration par défaut CSS Tailwind.

npx tailwindcss init

Cela crée tailwind.config.js dans le dossier racine qui stocke tous les fichiers de configuration de Tailwind et contient les éléments suivants :

module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}

Configurer les chemins de modèle

Vous devez indiquer à Tailwind CSS les fichiers qu’il doit vérifier pour voir quelles classes CSS sont utilisées. Cela permet à Tailwind d’identifier et de supprimer les classes inutilisées et donc de réduire la taille du CSS généré.

Dans tailwind.config.js, ajoutez les chemins du modèle sous la clé de contenu.

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

Injecter Tailwind CSS dans React

L’étape suivante consiste à inclure Tailwind CSS dans l’application en utilisant @tailwind directives.

Supprimer tout dans index.css et ajoutez ce qui suit pour importer les styles, composants et utilitaires de base.

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

Enfin, assurez-vous index.css est importé dans index.js et Tailwind CSS sera prêt à l’emploi.

Utilisation de Tailwind CSS pour styliser un composant React

Vous allez créer la page Web simple ci-dessous et la styliser à l’aide des classes utilitaires de Tailwind.


Cette page contient deux sections principales : une barre de navigationet la section héros (qui a un titre et un bouton).

Pour illustrer comment Tailwind CSS facilite l’écriture de CSS, essayez de styliser la page Web à l’aide de CSS simple et Tailwind CSS.

Commencez par modifier le App.js dans le src dossier pour supprimer le code inutile.

import './App.css'
function App() {
return (
<div className='app'>
</div>
);
}
export default App;

Ensuite, ajoutez le contenu de la page Web à App.js.

import "./App.css";
function App() {
return (
<div className="wrapper">
<nav>
<div className="logo">Tailwind CSS</div>
<ul>
<li>Install</li>
<li>Docs</li>
</ul>
</nav>
<div className="hero">
<h1 className="header">
Tailwind CSS makes styling React components easier!
</h1>
<button className="btn">Get Started</button>
</div>
</div>
);
}

Pour utiliser du CSS simple, ajoutez le CSS à App.css.

nav {
display: flex;
justify-content: space-between;
padding: 16px 36px;
color: #000;
box-shadow: 0px 2px 5px 0px rgba(168, 168, 168, 0.75);
}
.logo {
font-size: 18px;
font-weight: bold;
}
ul {
list-style: none;
display: inline-flex;
}
ul li {
margin-left: 16px;
cursor: pointer;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 64px;
}
h1 {
font-size: 36px;
text-align: center;
}
.btn {
background-color: #000000;
color: #fff;
padding: 10px;
width: fit-content;
margin-top: 36px;
}

Avec Tailwind CSS, vous n’avez pas besoin d’écrire les règles CSS pour chaque classe. Au lieu de cela, vous utilisez des classes utilitaires. Ce sont des classes limitées à une seule propriété CSS. Par exemple, si vous souhaitez créer un bouton avec un fond noir et une couleur de texte blanche, vous devez utiliser le bg-noir et texte blanc classes utilitaires.

App.js devrait ressembler à ceci.

function App() {
return (
<div>
<Navbar />
<div className="flex flex-col items-center mt-16">
<h1 className="text-4xl text-center">
Tailwind CSS makes styling React components easier!
</h1>
<button className="bg-black text-white p-2.5 w-fit mt-9 ">
Get Started
</button>
</div>
</div>
);
}

Vous n’avez pas besoin d’importer App.css puisque les styles générés par Tailwind CSS sont stockés dans index.css dans lequel vous avez importé index.js plus tôt.

Par rapport au CSS simple, cette approche se traduit par moins de code facile à comprendre.

Coder avec style avec Tailwind CSS

Dans cet article, vous avez découvert Tailwind CSS, ses forces, ses inconvénients et comment vous pouvez utiliser ses classes utilitaires dans les applications React. Outre les classes, Tailwind CSS offre également d’autres fonctionnalités supplémentaires, notamment la possibilité de créer des mises en page réactives et des composants réutilisables.

Mais, comme nous l’avons mentionné précédemment, Tailwind est loin d’être le seul framework CSS sur le marché. Lequel allez-vous utiliser pour votre prochain projet ?


Tailwind CSS vs Bootstrap : quel est le meilleur framework ?

Lors du choix d’un framework CSS, il est important de trouver celui qui répond à vos besoins.

Lire la suite

A propos de l’auteur

Marie Gathoni
(10 articles publiés)

Mary Gathoni est une développeuse de logiciels passionnée par la création de contenu technique non seulement informatif mais également engageant. Lorsqu’elle ne code pas ou n’écrit pas, elle aime passer du temps avec des amis et être à l’extérieur.

Plus de Mary Gathoni

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner

— to www.makeuseof.com