Tailwind CSS dans Angular

Tailwind est un framework CSS utility-first - comme un arsenal bien organisé.

Installation

1# Tailwind CSS 3 (avec la configuration présentée plus bas)
2npm install -D tailwindcss@3 postcss autoprefixer
3npx tailwindcss init

Avec Tailwind CSS 4, l'installation est différente : npm install tailwindcss @tailwindcss/postcss postcss, puis un fichier .postcssrc.json avec le plugin @tailwindcss/postcss et la ligne @import "tailwindcss"; dans styles.css. Tu n'as alors pas besoin de tailwind.config.js, et la configuration de la section suivante concerne la version 3.

Configuration

1// tailwind.config.js
2module.exports = {
3  content: [
4    "./src/**/*.{html,ts}",
5  ],
6  theme: {
7    extend: {
8      colors: {
9        'samurai-red': '#c41e3a',
10        'samurai-gold': '#ffd700',
11        'dojo-dark': '#1a1a2e',
12      },
13      fontFamily: {
14        'japanese': ['Noto Sans JP', 'sans-serif'],
15      },
16    },
17  },
18  plugins: [],
19}

1// styles.scss
2@tailwind base;
3@tailwind components;
4@tailwind utilities;
5
6@layer components {
7  .btn-samurai {
8    @apply bg-samurai-red text-white px-4 py-2 rounded-lg
9           hover:bg-red-700 transition-colors duration-200
10           focus:outline-none focus:ring-2 focus:ring-samurai-gold;
11  }
12
13  .card-dojo {
14    @apply bg-white dark:bg-dojo-dark rounded-xl shadow-lg
15           p-6 border border-gray-200 dark:border-gray-700;
16  }
17}

Utilisation dans les composants

1@Component({
2  template: `
3    <div class="min-h-screen bg-gray-100 dark:bg-dojo-dark p-8">
4      <header class="flex items-center justify-between mb-8">
5        <h1 class="text-3xl font-bold text-samurai-red">Dojo</h1>
6        <button class="btn-samurai">New Samurai</button>
7      </header>
8
9      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
10        @for (samurai of samuraiList(); track samurai.id) {
11          <article class="card-dojo hover:shadow-xl transition-shadow">
12            <h2 class="text-xl font-semibold mb-2">{{ samurai.name }}</h2>
13            <p class="text-gray-600 dark:text-gray-300">
14              Clan: {{ samurai.clan }}
15            </p>
16            <div class="mt-4 flex gap-2">
17              <button class="text-samurai-gold hover:underline">Edit</button>
18              <button class="text-red-500 hover:underline">Delete</button>
19            </div>
20          </article>
21        }
22      </div>
23    </div>
24  `
25})
26export class DojoGridComponent {
27  samuraiList = signal<Samurai[]>([]);
28}

Combinaison avec Angular Material

1@Component({
2  imports: [MatButtonModule, MatCardModule],
3  template: `
4    <mat-card class="max-w-md mx-auto shadow-xl">
5      <mat-card-header class="bg-gradient-to-r from-samurai-red to-red-700 text-white rounded-t-lg">
6        <mat-card-title class="px-4 py-2">Samurai Profile</mat-card-title>
7      </mat-card-header>
8      <mat-card-content class="p-6">
9        <div class="space-y-4">
10          <!-- Content with Tailwind -->
11        </div>
12      </mat-card-content>
13    </mat-card>
14  `
15})
16export class HybridStyledComponent {}