Aller au contenu

Installation de Tailwind CSS

Pour nous permetter d'utiliser les classes de Tailwind on doit l'ajouter à notre projet. Selon la nature de notre projet nous avons trois choix d'installation possible.

Installation depuis un CDN

Si vous voulez simplement explorer Tailwind sans nécessairement vouloir publier votre projet en ligne, vous pouvez utiliser un CDN. Tous ce que vous devez faire est d'ajouter la ligne suivante dans la section head de votre fichier html : 

<script src="https://cdn.tailwindcss.com"></script>

Ensuite vous pouvez utiliser Tailwind dans votre fichier. Par exemple ici le texte de ma balise h1 sera plus large, orange, gras et souligné : 

<h1 class="text-3xl font-bold text-orange-500 underline">

Voici un exemple complet : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold text-orange-500 underline">
      Hello Tailwind!
    </h1>
  </body>
</html>

Attention

L'installation par CDN ne devrait jamais être utilisé pour la mise en ligne d'un site, privilégiez plutôt les deux autres méthodes.

Installation depuis le CLI Tailwind

Version "Standalone"

Il est possible de télécharger un executable du CLI de Tailwind disponible à cette adresse : https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.3.3. Téléchargez la dernière version pour votre système d'exploitation. Renommez ensuite le fichier pour tailwindcss.exe et copiez le à la racine de votre projet. Ce n'est pas nécessaire de renommer le fichier mais c'est plus simple pour la suite.

Installation avec npm

Si vous avez npm d'installé sur votre machine, vous pouvez simplement lancer la commande suivante en ouvrant une console à la racine de votre projet : 

npm install -D tailwindcss

Initialisation

Ensuite faites la commande suivante pour créer un fichier tailwind.config.js qui contiendra les configurations de Tailwind associées à votre projet. Si vous utilisez la version "standalone", remplacez tailwindcss par le nom de votre fichier.

Version standalone
./tailwindcss init
Version npm
npx tailwindcss init

Configuration

Dans le fichier tailwind.config.js vous devez indiquer la structure de votre projet et indiquer où se situe vos fichiers html et javascript. Pour la structure qu'on utilise présentement, on peut simplifier à ce qui suit : 

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

Ça permet d'indexer tous les fichiers hmtl et js depuis la racine du projet. Si vous voulez allez plus loin dans la configuration : https://tailwindcss.com/docs/configuration

Création du fichier css de base

Créez ensuite un fichier de style css, idéalement dans un répertoire nommé css :stuck_out_tongue_winking_eye:, dans lequel vous allez indiquez à Tailwind quelles librairies utilisées. Vous pouvez y aller avec ce qui suit qui englobe le défaut:

css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Lancement de l'utilitaire de

Encore dans la console à la racine de votre projet, lancez la commande suivante. Remplacez input.css par le nom du fichier que vous venez de créer à l'étape précédente et output.css par le nom du fichier que vous voulez utiliser dans votre projet

Version standalone
./tailwindcss -i ./css/input.css -o ./css/output.css --watch
Version npm
npx tailwindcss -i ./css/input.css -o ./css/output.css --watch

L'utilitaire va "surveiller" dans tous les fichiers de votre projet la présence de classe Tailwind et contruire le css requis dans le fichier output.css (ou le nom que vous lui avez donné). Pour arrêter l'utilitaire faites ctrl+c.

Liaison avec les fichiers HTML

Finalement dans vos fichiers HTML vous devez lier le fichier css créé par l'utilitaire avec la balise link comme on le fait avec tout autre fichier css. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/output.css">
  </head>
  <body>
    <h1 class="text-3xl font-bold text-orange-500 underline">
      Hello Tailwind!
    </h1>
  </body>
</html>

Sources