Angular Tailwind

Angular + Tailwind CSS

Version: Tailwind CSS 4.x (2025) Tags: Tailwind CSS, Styling, Utility-first, CSS

References: Tailwind CSS • Angular Tailwind

API Changes

This section documents recent version-specific API changes.

• NEW: Tailwind CSS v4 — New engine with improved performance source

• NEW: @tailwindcss/vite — Native Vite support

• NEW: CSS-first configuration — Configure Tailwind with CSS instead of config file

• NEW: Angular 17+ support — Full compatibility with standalone components

Best Practices

• Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

• Configure tailwind.config.js

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

• Add directives to styles

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

• Use Tailwind v4 with Angular

npm install tailwindcss @tailwindcss/vite