Utiliser Tailwind CSS avec Angular

Tailwind CSS est un framework CSS « utility-first » qui permet de construire des sites web modernes sans jamais quitter votre HTML. Ce guide vous accompagne dans la mise en place de Tailwind CSS dans votre projet Angular.

Configuration automatisée avec ng add

Angular CLI offre un moyen simple d'intégrer Tailwind CSS à votre projet grâce à la commande ng add. Cette commande installe automatiquement les packages nécessaires, configure Tailwind CSS et met à jour les paramètres de build de votre projet.

Commencez par vous placer dans le répertoire racine de votre projet Angular dans un terminal, puis exécutez la commande suivante :

ng add tailwindcss

Cette commande effectue les actions suivantes :

• Installe tailwindcss et ses dépendances peer.
• Configure le projet pour utiliser Tailwind CSS.
• Ajoute l'instruction @import de Tailwind CSS à vos styles.

Après avoir exécuté ng add tailwindcss, vous pouvez immédiatement utiliser les classes utilitaires de Tailwind dans les templates de vos composants.

Configuration manuelle (méthode alternative)

Si vous préférez configurer Tailwind CSS manuellement, suivez ces étapes :

1. Créer un projet Angular

Commencez par créer un nouveau projet Angular si vous n'en avez pas déjà un.

ng new my-project
cd my-project

2. Installer Tailwind CSS

Ensuite, ouvrez un terminal dans le répertoire racine de votre projet Angular et exécutez la commande suivante pour installer Tailwind CSS et ses dépendances peer :

npm install tailwindcss @tailwindcss/postcss postcss

yarn add tailwindcss @tailwindcss/postcss postcss

pnpm add tailwindcss @tailwindcss/postcss postcss

bun add tailwindcss @tailwindcss/postcss postcss

3. Configurer les plugins PostCSS

Ensuite, ajoutez un fichier .postcssrc.json à la racine du projet. Ajoutez le plugin @tailwindcss/postcss à votre configuration PostCSS.

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

4. Importer Tailwind CSS

Ajoutez à ./src/styles.css un @import qui importe Tailwind CSS.

@import 'tailwindcss';

Si vous utilisez SCSS, ajoutez @use à ./src/styles.scss.

@use 'tailwindcss';

5. Commencer à utiliser Tailwind dans votre projet

Vous pouvez maintenant utiliser les classes utilitaires de Tailwind dans les templates de vos composants pour styliser votre application. Lancez votre build avec ng serve : vous devriez voir le titre stylisé.

Par exemple, vous pouvez ajouter le code suivant à votre fichier app.html :

<h1 class="text-3xl font-bold underline">Hello world!</h1>

Ressources supplémentaires

• Documentation de Tailwind CSS