Comment ajouter Tailwind CSS dans Angular ?

Qu'est ce que Tailwind CSS ?

Tailwind CSS est un outil qui permet de faciliter la mise en forme de votre site web en utilisant des classes prédéfinies. Au lieu d'écrire vous-même des styles CSS pour chaque élément de votre page, vous pouvez utiliser des classes de Tailwind qui ont déjà des styles prédéfinis.

Il est utilisé pour améliorer la rapidité de développement en vous offrant un ensemble de classes de mise en forme pour utiliser dans vos pages web. Il est également utilisé pour faciliter la maintenance des styles en utilisant des classes prédéfinies qui ont des styles déjà définis.

Il est basé sur une approche de "utilitaires" qui consiste à fournir des classes prédéfinies pour les différents styles de mise en forme comme les marges, les padding, les couleurs de fond, les tailles de police, etc. Il vous permet de construire des designs réactifs et accessibles en utilisant des classes simples et concises.

En utilisant Tailwind CSS, vous pouvez vous concentrer sur la conception de votre site web et laisser Tailwind s'occuper de la mise en forme. Cela peut vous faire gagner du temps et vous aider à créer des designs plus cohérents et plus faciles à maintenir.

Installer Tailwind dans Angular

Il y a plusieurs étapes pour ajouter Tailwind à un projet Angular :

1. Installer Tailwind en utilisant npm:

npm install -D tailwindcss postcss autoprefixer

2. Créer un fichier de configuration de Tailwind (par exemple, tailwind.config.js) en utilisant la commande:

npx tailwind init

3. Modifiez le fichier tailwind.config.js :

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

4. Ajouter dans styles.css les lignes suivantes :

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

5. Utilisez les classes de Tailwind dans vos composants Angular pour appliquer des styles.

Comment créer ses propres classes avec @layer et @apply dans styles.csss ?

Avec Tailwind, vous pouvez créer vos propres classes en utilisant les at-rules @layer et @apply.

L'at-rule @layer vous permet de créer un nouveau "couche" de styles qui peut être appliquée à des éléments en utilisant la notation de classe .layer-name. Cela vous permet de créer des styles personnalisés qui peuvent être facilement réutilisés dans votre projet.

L'at-rule @apply vous permet d'appliquer un ensemble de styles existants à une classe personnalisée. Cela vous permet de créer des classes personnalisées qui héritent des styles existants de Tailwind, vous permettant de construire des designs plus complexes à partir des styles de base.

Voici un exemple de comment vous pouvez utiliser ces at-rules pour créer vos propres classes :

/* Create a new layer */
@layer my-button {
  /* Add styles to the new layer */
  background-color: blue;
  color: white;
  font-size: 14px;
  padding: 10px;
}

/* Apply the layer to a class */
.my-custom-button {
  @apply my-button;
}

En utilisant cet exemple, vous pourrez utiliser la classe my-custom-button dans votre HTML pour appliquer les styles de la couche my-button à un élément.