Tailwind CSS in Angular

Tailwind is a utility-first CSS framework - like a well-organized arsenal.

Installation

1# Angular 17+
2ng add @angular-devkit/schematics
3npm install -D tailwindcss postcss autoprefixer
4npx tailwindcss init

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}

Usage in Components

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}

Combining with 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 {}