Ajouter Tailwind CSS à son application Angular

Contrairement à la majorité des frameworks CSS qui fournissent des composants préconstruits, Tailwind fournit des milliers de classes utilitaires de bas niveau que vous pourrez alors combiner pour créer des designs personnalisés. Il est basé sur la philosophie selon laquelle tout ce que vous pouvez faire avec du CSS, vous pouvez l’accomplir en ajoutant des classes utilitaires directement dans votre HTML.

Quant à Angular, c’est une plateforme permettant de développer des applications d’entreprise de grande qualité. Combinez Angular et Tailwind et vous obtiendrez une stack parfaite pour créer des applications Web de classe mondiale.

Dans ce guide, nous allons voir comment ajouter Tailwind CSS à son application Angular.

1. Générer une nouvelle application Angular

Commencez par créer un nouveau projet Angular en utilisant la commande ng new :

1ng new my-app

Lorsque le Angular CLI vous posera la question ”which stylesheet format would you like to use?” choisissez CSS car :

• Vous n’avez pas besoin d’un préprocesseur CSS comme Sass. Avec Tailwind, il est vraiment rare d’é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 un projet existant ou que vous souhaitez utiliser un préprocesseur CSS, ne vous inquiétez pas ! Ce guide reste applicable.

2. Installer les dépendances

Installer les dépendances nécessaires avec npm :

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

Si vous utilisez npm, vous n’avez techniquement pas besoin d’installer postcss. Mais l’installer vous permettra d’éviter des problèmes de hoisting and rendra votre setup plus robuste.

3. Créer le fichier de configuration de Tailwind

1npx tailwind init

Cette commande va créer un fichier nommé tailwind.config.js qui va contenir la configuration de Tailwind CSS. C’est dans ce fichier que vous pourrez personnaliser votre design system et ajouter des plugins à Tailwind.

4. Spécifier la localisation de vos HTML et TypeScript

Les classes utilitaires Tailwind sont générées à la volée lorsque vous les utilisez dans votre application. Vous devez donc dire à Tailwind où partir à la recherche de l’utilisation de ces classes au sein de votre projet.

Ouvrez le fichier tailwind.config.js et remplacez son contenu par :

1module.exports = {
2  content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'],
3  theme: {
4    extend: {},
5  },
6  plugins: [],
7};

Grâce à cette configuration, Tailwind va scanner le contenu de tous les fichiers HTML et TypeScript situés dans les répertoires src et projects.

5. Ajouter les directives Tailwind à votre fichier de CSS global

Ouvrez votre fichier de CSS global (src/style.css) et rajoutez le contenu suivant :

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Grâce à ça, Tailwind va traiter les directives @tailwind et va injecter à leur place les styles associés aux couches base, components, et utilities.

6. Profitez !

Vous pouvez maintenant démarrer votre application Angular et profiter de Tailwind :

1npm start