À mesure que vous progressez en tant que développeur, vous êtes plus susceptible d’utiliser des technologies qui vous aident à faire plus en écrivant moins de code. Un framework frontend solide comme Tailwind CSS est un moyen d’y parvenir.

Dans cet article, nous allons découvrir Tailwind CSS, un framework CSS qui facilite la création et la conception de pages web. Nous commencerons par expliquer comment installer et intégrer Tailwind CSS dans votre projet, voir quelques applications pratiques, et aussi comment vous pouvez créer vos styles et extensions personnalisées.

Ça vous dit ? C’est parti !

Consultez notre guide vidéo sur l’utilisation de Tailwind CSS pour la construction de sites web :

Qu’est-ce que Tailwind CSS ?

Tailwind CSS.
Tailwind CSS.

Tailwind CSS est un framework utility-fist CSS (feuilles de style en cascade) avec des classes prédéfinies que vous pouvez utiliser pour construire et concevoir des pages web directement dans votre balisage. Il vous permet d’écrire du CSS dans votre HTML sous la forme de classes prédéfinies.

Nous allons définir ce qu’est un framework et ce que nous entendons par « utility-first CSS » pour vous aider à mieux comprendre ce qu’est Tailwind CSS.

Qu’est-ce qu’un framework ?

En tant que terme général de programmation, un framework est un outil qui fournit des composants réutilisables et prêts à l’emploi construits à partir des fonctionnalités d’un outil déjà existant. L’objectif général de la création de frameworks est d’augmenter la vitesse de développement en faisant moins de travail.

Maintenant que nous avons établi la signification d’un framework, cela devrait vous aider à comprendre que Tailwind CSS est un outil construit à partir des fonctionnalités CSS. Toutes les fonctionnalités du framework sont dérivées des styles CSS composés en tant que classes.

Qu’est-ce qu’un framework CSS utility-first ?

Lorsque nous disons « utility-first CSS », nous faisons référence à des classes dans notre balisage (HTML) avec des fonctionnalités prédéfinies. Cela implique que vous n’avez qu’à écrire une classe à laquelle sont attachés des styles prédéfinis, et ces styles seront appliqués à l’élément.

Dans le cas où vous travaillez avec le CSS vanilla (CSS sans framework ou bibliothèque), vous donnerez d’abord un nom de classe à votre élément, puis vous attacherez différentes propriétés et valeurs à cette classe, qui, à son tour, appliquera un style à votre élément.

Nous allons vous montrer un exemple. Ici, nous allons créer un bouton avec des coins arrondis et un texte qui dit « Clic me » Voici à quoi ressemblera le bouton :

Notre bouton.
Notre bouton.

Nous allons d’abord faire cela en utilisant le CSS vanilla, puis en utilisant les classes utilitaires disponibles dans le CSS Tailwind.

Avec Vanilla CSS

<button class="btn">Click me</button>

Nous avons donné aux balises de bouton la classe btn, qui sera stylisée à l’aide d’une feuille de style externe. C’est-à-dire :

.btn {
  background-color: #000;
  color: #fff;
  padding: 8px;
  border: none;
  border-radius: 4px;
}

Avec Tailwind CSS

<button class="bg-black text-white p-2 rounded">Click me</button>

Tout ceci est nécessaire pour obtenir le même effet que l’exemple avec le CSS vanilla. Aucune feuille de style externe où vous devez écrire les styles n’a été créée car chaque nom de classe que nous avons utilisé possède déjà un style prédéfini.

Pré-requis à l’utilisation de Tailwind CSS

Avant d’utiliser Tailwind CSS, il y a quelques conditions préalables que vous devez envisager de réunir pour utiliser les fonctionnalités du framework sans difficultés. En voici quelques-unes :

Où peut-on utiliser Tailwind CSS ?

Vous pouvez utiliser Tailwind CSS dans des projets web frontend, notamment dans des frameworks JavaScript tels que React.js, Next.js, Laravel, Vite, Gatsby, etc.

Avantages et inconvénients de Tailwind CSS

Voici quelques-uns des avantages de l’utilisation de Tailwind CSS:

  1. Processus de développement plus rapide
  2. Vous aide à pratiquer davantage votre CSS car les utilitaires sont similaires
  3. Tous les utilitaires et composants sont facilement personnalisables
  4. La taille globale du fichier pour la production est généralement faible
  5. Facile à apprendre si vous connaissez déjà le CSS
  6. Bonne documentation pour l’apprentissage

Voici quelques-uns des inconvénients de l’utilisation de Tailwind CSS:

  1. Votre balisage peut sembler désorganisé pour les grands projets car tous les styles se trouvent dans les fichiers HTML.
  2. Ce n’est pas facile à apprendre si vous ne comprenez pas bien CSS.
  3. Vous êtes obligé de tout construire à partir de zéro, y compris vos éléments de saisie. Lorsque vous installez Tailwind CSS, il supprime tous les styles CSS par défaut.
  4. Tailwind CSS n’est pas la meilleure option si vous cherchez à minimiser le temps passé à développer le frontend de votre site web et à vous concentrer principalement sur la logique du backend.

Quand utiliser Tailwind CSS

Tailwind CSS est utilisé de préférence pour accélérer le processus de développement en écrivant moins de code. Il est livré avec un système de conception qui aide à maintenir la cohérence entre les diverses exigences de conception telles que le remplissage, l’espacement, et ainsi de suite ; avec cela, vous n’avez pas à vous soucier de créer vos systèmes de conception.

Vous pouvez également utiliser Tailwind CSS si vous cherchez à utiliser un framework facilement configurable, car il ne vous oblige pas à utiliser les composants (barres de navigation, boutons, formulaires, etc.) de la même manière à chaque fois ; vous pouvez choisir l’apparence de vos composants. Mais vous ne devriez jamais utiliser Tailwind si vous n’avez pas appris et pratiqué le CSS.

Similitudes et différences entre Tailwind CSS et les autres frameworks CSS

Voici quelques similitudes :

  1. Ils vous aident à effectuer votre travail plus rapidement.
  2. Ils sont fournis avec des classes prédéfinies.
  3. Ils ont été conçus à partir de règles CSS.
  4. Ils sont faciles à apprendre et à utiliser avec une connaissance pratique de CSS.

Voyons maintenant quelques différences :

  1. Tailwind est différent de la plupart des frameworks car vous devez créer vos composants. Par exemple, Bootstrap propose des composants tels que des barres de navigation, des boutons, etc., mais avec Tailwind, vous devez créer tout cela vous-même.
  2. Certains frameworks comme Bootstrap ne sont pas facilement personnalisables, vous êtes donc obligé d’utiliser leurs modèles de conception. Dans Tailwind, vous contrôlez le flux de tout.
  3. Une connaissance approfondie du CSS est nécessaire pour utiliser Tailwind. Il ne suffit pas d’écrire des noms de classe, car vous devez les combiner comme si vous écriviez du CSS vanilla pour obtenir le même résultat. Dans la plupart des autres frameworks, il vous suffit de savoir quel composant sera construit lorsque vous utilisez un nom de classe.

Comment commencer à utiliser Tailwind CSS

Avant d’installer Tailwind CSS et de l’intégrer à votre projet, assurez-vous que :

  1. Vous avez installé Node.js sur votre ordinateur pour pouvoir utiliser le gestionnaire de paquets Node (npm) dans le terminal.
  2. Votre projet est en place avec vos fichiers créés.

Voici à quoi ressemble la structure de notre projet pour le moment :

-Tailwind-tutorial
    -public
        -index.html
        -styles.css
    -src
        -styles.css

Ensuite, démarrez un terminal pour votre projet et exécutez les commandes suivantes :

    npm install -D tailwindcss

La commande ci-dessus installera le framework CSS Tailwind en tant que dépendance. Ensuite, générez votre fichier tailwind.config.js en exécutant la commande ci-dessous :

 npx tailwindcss init

Le fichier tailwind.config.js sera vide lors de sa création, nous devons donc ajouter quelques lignes de code:

module.exports = {
  content: ["./src/**/*.{html,js}", "./public/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Les chemins de fichier fournis dans le tableau de contenu permettront à Tailwind de purger/supprimer tout style inutilisé lors de la construction.

La prochaine chose à faire est d’ajouter les directives « @tailwind » à votre fichier CSS dans le dossier src – c’est là que Tailwind génère tous ses styles utilitaires prédéfinis pour vous :

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

La dernière chose à faire est de lancer le processus de construction en exécutant cette commande dans votre terminal :

    npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

Dans le code ci-dessus, nous indiquons à Tailwind que notre fichier d’entrée est la feuille de style dans le dossier src et que les styles que nous avons utilisés doivent être intégrés dans le fichier de sortie dans le dossier public. --watch permet à Tailwind de surveiller les changements dans votre fichier pour un processus de construction automatique ; l’omettre signifie que nous devons exécuter ce script chaque fois que nous voulons construire notre code et voir la sortie souhaitée.

Utiliser Tailwind CSS

Maintenant que nous avons installé et configuré Tailwind CSS pour notre projet, voyons quelques exemples pour comprendre pleinement son application.

Exemple de Flexbox

Pour utiliser flex dans Tailwind CSS, vous devez ajouter une classe de flex et ensuite la direction des éléments flex :

    <div class="flex flex-row">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
    </div>
Nos trois boutons violets.
Nos trois boutons violets.

L’utilisation de flex-row-reverse inversera l’ordre d’apparition des boutons.

flex-col les empilera les uns sur les autres. Voici un exemple :

    <div class="flex flex-col">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
    </div>
Nos trois boutons violets.
Nos trois boutons violets.

Tout comme l’exemple précédent, flex-col-reverse inverse l’ordre.

Exemple de grille

Lorsque nous spécifions des colonnes et des lignes dans le système de grille, nous adoptons une approche différente en passant dans un nombre qui déterminera comment les éléments occuperont l’espace disponible :

<div class="grid grid-cols-3">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
      <button> Button 4 </button>
      <button> Button 5 </button>
      <button> Button 6 </button>
    </div>
Nos six boutons violets.
Nos six boutons violets.

Couleurs

Tailwind est livré avec un grand nombre de couleurs prédéfinies. Chaque couleur possède un ensemble de variations différentes, la variation la plus claire étant de 50 et la plus foncée de 900.

Voici une image de plusieurs couleurs et de leurs codes hexagonaux HTML pour illustrer ceci

Personnalisation des couleurs à partir de la palette par défaut de Tailwind
Personnalisation des couleurs à partir de la palette par défaut de Tailwind.(Source de l’image)

Nous allons vous donner un exemple de la façon dont vous pouvez procéder en utilisant la couleur rouge ci-dessus pour donner une couleur d’arrière-plan à un élément de bouton :

<button class="bg-red-50">Click me</button>
<button class="bg-red-100">Click me</button>
<button class="bg-red-200">Click me</button>
<button class="bg-red-300">Click me</button>
<button class="bg-red-400">Click me</button>
<button class="bg-red-500">Click me</button>
<button class="bg-red-600">Click me</button>
<button class="bg-red-700">Click me</button>
<button class="bg-red-800">Click me</button>
<button class="bg-red-900">Click me</button>

Cette syntaxe est la même pour toutes les couleurs dans Tailwind, à l’exception du noir et du blanc, qui s’écrivent de la même manière mais sans l’utilisation de chiffres bg-black et bg-white.

Pour ajouter une couleur de texte, vous utilisez la classe text-{color}:

<p class="text-yellow-600">Hello World</p>

Marge intérieure (Padding)

Tailwind dispose déjà d’un système de conception qui vous aiderait à conserver une échelle cohérente dans vos conceptions. Il vous suffit de connaître la syntaxe d’application de chaque utilitaire.

Les utilitaires suivants permettent d’ajouter du padding à vos éléments :

  • p indique une marge intérieure sur l’ensemble de l’élément.
  • py désigne une marge intérieure en haut et une marge intérieure en bas.
  • px indique lune marge intérieure à gauche et une marge intérieure à droite.
  • pt indique une marge intérieure en haut.
  • pr indique une marge intérieure à droite.
  • pb désigne une marge intérieure en bas de page.
  • pl désigne une marge intérieure à gauche

Pour les appliquer à vos éléments, vous devrez utiliser les numéros appropriés fournis par Tailwind – un peu comme les numéros qui représentaient les variantes de couleur dans la dernière section. Voici ce que nous voulons dire :

<button class="p-0">Click me</button>
<button class="pt-1">Click me</button>
<button class="pr-2">Click me</button>
<button class="pb-3">Click me</button>
<button class="pl-4">Click me</button>

Marge

Les utilitaires prédéfinis pour le padding et la marge sont très similaires. Vous devez remplacer le p par un m:

  • m
  • my
  • mx
  • mt
  • mr
  • mb
  • ml

Comment créer une extension CSS Tailwind

Même si Tailwind CSS dispose de nombreux utilitaires et systèmes de conception déjà construits pour vous, il est toujours possible que vous ayez une fonctionnalité particulière que vous aimeriez ajouter pour étendre ce pour quoi Tailwind peut être utilisé. Tailwind CSS nous permet de le faire en créant une extension.

Mettons les mains dans le cambouis en créant une extension qui ajoute la couleur aqua et un utilitaire de rotation qui fait pivoter un élément de 150º sur l’axe des X. Nous allons créer ces utilitaires dans le fichier tailwind.config.js en utilisant un peu de JavaScript.

const plugin = require("tailwindcss/plugin");

module.exports = {
  content: ["./src/**/*.{html,js}", "./public/*.html"],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      const myUtilities = {
        ".bg-aqua": { background: "aqua" },
        ".rotate-150deg": {
          transform: "rotateX(150deg)",
        },
      };
      addUtilities(myUtilities);
    }),
  ],

};

Maintenant, décomposons tout cela. La première chose que nous avons faite est d’importer la fonction plugin de Tailwind :

const plugin = require("tailwindcss/plugin");

Ensuite, nous avons créé nos extensions dans le tableau des extensions :

  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        ".bg-aqua": { background: "aqua" },
        ".rotate-150deg": {
          transform: "rotateX(150deg)",
        },
      };
      addUtilities(newUtilities);
    }),
  ],

Vous devrez peut-être ré-exécuter le script de construction après avoir créé votre extension.

Maintenant que les extensions sont prêtes, nous pouvons les tester :

<button class="bg-aqua rotate-150deg">Click me</button>

Si vous avez tout fait correctement, vous devriez avoir un bouton de couleur aqua avec le texte tourné à 150º sur l’axe X.

Résumé

Les frameworks sont une option inestimable lorsqu’il s’agit d’accélérer votre flux de travail. Ils vous aident à créer des pages web professionnelles et de belle apparence tout en maintenant la cohérence de la conception. Tailwind CSS propose de nombreuses classes CSS utilitaires pour vous aider à faire passer votre conception et votre développement web au niveau supérieur.

Cet article nous a appris ce qu’est Tailwind CSS et ce qui en fait un framework. Nous avons ensuite examiné le processus d’ installation et vu quelques exemples qui montraient comment nous pouvions créer nos propres extensions personnalisés pour étendre la fonctionnalité existante.

Si vous avez suivi jusqu’à ce point, vous avez maintenant une compréhension de base mais solide du fonctionnement de Tailwind. Cependant, pour vous améliorer dans l’utilisation d’un tel framework axé sur l’utilité, vous devez continuer à vous exercer et accroître vos connaissances en CSS si vous ne disposez pas déjà de bases solides.

Vous avez utilisé Tailwind CSS ou un autre framework CSSpar le passé ? Partagez vos réflexions dans la section des commentaires !

Ihechikara Abba

Ihechikara is a software developer and technical writer. He enjoys writing articles on web technologies, programming, and IT-related topics.
Connect with Ihechikara on Twitter.