TL;DR: TailwindCSS can be integrated into Angular in just a few steps. You get a utility-first CSS framework that harmonizes perfectly with Angular's component architecture – faster styling, fewer CSS files, maximum flexibility.

🤔 Why Angular + TailwindCSS?

Angular comes with a solid component system out of the box, but when it comes to styling, a lot of boilerplate often remains. Custom CSS classes for every component, endless stylesheets, BEM naming conventions – it doesn't have to be that way.

TailwindCSS follows the utility-first approach: Instead of writing custom classes, you use pre-built utility classes directly in your templates. The result? Fewer CSS files, consistent design, and lightning-fast development.

The combination of Angular and Tailwind is particularly powerful because:

• Component isolation and utility classes complement each other perfectly
• Tailwind's JIT compiler only generates the classes you actually use
• Responsive design and dark mode work without any extra effort
• The final CSS bundle stays extremely small

📦 Installation

Option 1: Via the Angular CLI (recommended)

Since Angular 11.2+, there's an official schematic:

ng add @angular/tailwindcss

That's it! The schematic takes care of everything automatically.

Option 2: Manual Installation

If you prefer to do it manually or are using an older Angular version:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This creates a tailwind.config.js in the root of your project.

⚙️ Configuration

tailwind.config.js

The most important step: Tailwind needs to know where your templates are located so it can detect the classes being used:

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

The content array is crucial: This is where you specify all files that may contain Tailwind classes. In Angular, these are primarily .html templates and .ts files (for inline templates).

🎨 Tailwind Directives in styles.css

Open your global src/styles.css (or styles.scss) and add the three Tailwind directives:

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

These directives are replaced by the actual CSS during the build process. @tailwind base sets a clean reset, @tailwind components provides component classes, and @tailwind utilities delivers all utility classes.

🚀 Usage in Templates

Basic Utility Classes

Now you can use Tailwind classes directly in your Angular templates:

<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md">
  <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
  <button class="px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700 transition-colors">
    New Entry
  </button>
</div>

Responsive Design

Tailwind makes responsive design incredibly easy with its breakpoint prefixes:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="p-4 bg-gray-100 rounded">Card 1</div>
  <div class="p-4 bg-gray-100 rounded">Card 2</div>
  <div class="p-4 bg-gray-100 rounded">Card 3</div>
</div>

The breakpoints sm:, md:, lg:, xl:, and 2xl: follow the mobile-first principle – styles without a prefix apply to all screen sizes.

Dark Mode

Dark mode is immediately ready to use with the dark: prefix:

<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-6 rounded-lg">
  <p>This section automatically adapts to the system theme.</p>
</div>

Enable dark mode in the configuration:

module.exports = {
  darkMode: 'class', // or 'media' for system preference
  // ...
}

🧩 Component-Level Styling and ViewEncapsulation

Angular uses ViewEncapsulation.Emulated by default, which means styles are scoped to the respective component. This can lead to surprises with Tailwind.

The problem: When you use @apply in a component CSS file, it only works if the Tailwind directives are also available in that file.

The solution: Use Tailwind classes primarily directly in templates – this always works, regardless of encapsulation. For @apply in component styles, there are two approaches:

@Component({
  selector: 'app-card',
  template: `<div class="card">Content</div>`,
  styles: [`
    .card {
      @apply p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow;
    }
  `],
  encapsulation: ViewEncapsulation.None // Caution: Styles are global!
})

Alternatively, you can keep ViewEncapsulation.Emulated and use the global styles.css for @apply classes:

/* In src/styles.css */
@layer components {
  .card {
    @apply p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow;
  }
}

🎯 Extending the Custom Theme

In tailwind.config.js, you can customize the default theme to your liking:

module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {
      colors: {
        primary: {
          50:  '#eff6ff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          900: '#1e3a5f',
        },
        accent: '#f59e0b',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [],
}

Your custom colors are then immediately available as utility classes: bg-primary-500, text-accent, etc.

💡 Tips and Best Practices

@apply in Component Styles

Use @apply sparingly and only when class combinations are frequently repeated:

/* Good: Reusable combination */
.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors font-medium;
}

/* Bad: One-time use – better to use classes directly in the template */
.my-special-div {
  @apply mt-4 p-2;
}

JIT Mode (Just-in-Time)

Since Tailwind v3, the JIT compiler is active by default. This means:

• Lightning-fast build times, as only used CSS is generated
• Arbitrary values are possible: w-[137px], bg-[#1a2b3c], grid-cols-[1fr_2fr_1fr]
• All variants are available without explicitly enabling them

<!-- Arbitrary Values – when the default scale doesn't fit -->
<div class="w-[calc(100%-2rem)] mt-[13px] bg-[#f0f9ff]">
  More flexible than ever before!
</div>

More Tips

• Use the Tailwind CSS IntelliSense VS Code plugin for autocomplete
• Use Prettier with the Tailwind plugin (prettier-plugin-tailwindcss) for consistent class ordering
• Use @layer to place custom styles in the correct cascade level
• Use the Tailwind UI documentation as inspiration for components

✅ Conclusion

Angular and TailwindCSS are a true power duo. Integration is done in minutes thanks to the Angular CLI, and the utility-first approach dramatically speeds up your styling. The combination of Angular's component architecture and Tailwind's JIT compiler is particularly effective for creating lean, high-performance applications.

If you've been working with extensive CSS files or CSS-in-JS solutions, you'll quickly appreciate the simplicity of Tailwind. Give it a try – you won't want to go back!