Ajouter Tailwind CSS à son application Angular

Contrairement à la plupart des frameworks CSS qui proposent des composants préconstruits, Tailwind CSS offre des milliers de classes utilitaires de bas niveau, qui peuvent être combinées pour concevoir des designs sur mesure. Il repose sur la philosophie selon laquelle tout ce qui peut être réalisé avec du CSS peut l’être en ajoutant des classes utilitaires directement dans le HTML. Cette approche est aujourd’hui la méthode la plus populaire pour gérer le CSS dans les applications web modernes.

Dans ce guide, nous allons voir comment intégrer Tailwind CSS dans une application Angular.

1. Générez une nouvelle application Angular

Si vous ne disposez pas d’un projet existant, commencez par en créer un nouveau en utilisant la commande ng new :

1ng new my-app
2cd my-app

Lorsque le Angular CLI vous posera la question ”Which stylesheet format would you like to use”, je vous conseille de choisir CSS car :

• Vous n’avez pas besoin d’un préprocesseur CSS comme Sass. De toute façon, avec Tailwind, il est vraiment de devoir écrire du CSS.
• Votre build sera plus rapide parce que votre CSS n’aura pas besoin de passer par plusieurs phases de compilation.

Si vous avez déjà un projet existant ou souhaitez utiliser un préprocesseur CSS, pas de panique ! Ce guide reste applicable.

2. Installez les dépendances

Installez les dépendances nécessaires avec npm :

1npm install @tailwindcss/postcss postcss --save-dev
2npm install tailwindcss

3. Configurez PostCSS

Créez ensuite un fichier .postcssrc.json à la racine de votre projet et ajoutez-y le contenu suivant :

1{
2  "plugins": {
3    "@tailwindcss/postcss": {}
4  }
5}

4. Créez un fichier CSS pour Tailwind

Créer un fichier src/styles/tailwind.css et importez Tailwind :

1@import "tailwindcss";

5. Incluez Tailwind dans votre CSS global

Modifiez votre fichier CSS global (src/styles.css) pour ajouter le contenu suivant :

1@import './styles/tailwind.css';

Si vous utilisez Sass, il faut utiliser @import à la place de @use. Dans le fichier CSS global (src/styles.scss), ajoutez donc le contenu suivant :

1@use './styles/tailwind.css';

Si vous utilisez du CSS, vous pourriez techniquement ajouter l’@import directement dans votre fichier CSS global. Toutefois, créer un fichier dédié pour Tailwind vous permettra de centraliser tout ce qui concerne son utilisation, comme l’ajout de plugins ou la configuration du thème.

6. Profitez !

Lancez maintenant votre application Angular pour commencer à utiliser Tailwind :

1ng serve