How to Use Tailwind 4 with Angular 19

Tailwind CSS 4 brings modern utility-first styling capabilities to the table, making it a perfect choice for building fast, customizable, and scalable UIs. However, when integrating it with Angular 19, there are some nuances and workarounds you need to be aware of. This guide will walk you through the process step-by-step.

1. Prerequisites

Before starting, ensure you have the following installed on your system:

• Node.js (version 18 or higher recommended)
• Angular CLI 19

2. Install Tailwind CSS 4 and Dependencies

The main command to install Tailwind CSS 4, along with its dependencies, is:

npm install tailwindcss @tailwindcss/postcss postcss --force

The --force flag is necessary to resolve any potential version conflicts, as Tailwind CSS 4 requires specific versions of its dependencies that might not align with Angular's default setup.

3. Configure PostCSS

Create a .postcssrc.json file in the root of your project. Add the following configuration:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

This configuration ensures that Tailwind CSS is properly integrated with PostCSS, enabling its utilities to be processed during the build.

4. Workaround for Compatibility Issues

Currently, @angular-devkit/build-angular does not officially support Tailwind CSS v4. You must be receiving error like below:

$ npm install  
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @angular-devkit/build-angular@19.1.4
npm error Found: tailwindcss@4.0.0
npm error node_modules/tailwindcss
npm error   tailwindcss@"^4.0.0" from the root project
npm error   tailwindcss@"4.0.0" from @tailwindcss/node@4.0.0
npm error   node_modules/@tailwindcss/node
npm error     @tailwindcss/node@"^4.0.0" from @tailwindcss/postcss@4.0.0
npm error     node_modules/@tailwindcss/postcss
npm error       @tailwindcss/postcss@"^4.0.0" from the root project
npm error   1 more (@tailwindcss/postcss)

However, you can override the version constraints to make it work. Open your package.json file and add the following overrides section:

{
  "overrides": {
    "@angular-devkit/build-angular": {
      "tailwindcss": "^4.0.0"
    }
  }
}

This tells Angular to use Tailwind CSS v4 despite the lack of direct support, allowing you to leverage its latest features.

Soon Tailwind 4 be supported for Angular without using --force or above workaround.

5. Initialize Tailwind CSS

Once the installation is complete, initialize Tailwind CSS by creating a tailwind.config.js file in your project root. Run the following command:

npx tailwindcss init

This generates a basic Tailwind configuration file. You can customize it to suit your project needs. For example, add the paths to your Angular components for purging unused styles:

module.exports = {
  content: [
    "./src/**/*.{html,ts}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

6. Update Angular's Global Styles

In the src/styles.css (or src/styles.scss) file of your Angular project, import Tailwind's base, components, and utilities:

@import "tailwindcss";

7. Build and Verify

Run the Angular development server to verify that Tailwind CSS is working correctly:

ng serve

Inspect your application and confirm that Tailwind's classes are applied properly. You can test this by adding some utility classes like bg-blue-500 or text-white to your HTML elements.

Conclusion

By following this guide, you can successfully set up and use Tailwind CSS 4 with Angular 19. While there are a few compatibility challenges, the outlined steps provide a clear workaround to ensure smooth integration. With Tailwind's utility-first approach, you can rapidly develop modern and responsive UIs within your Angular applications.