How can I setup tailwind.config.js with Angular & TailwindCSS v4 application

Question

I used this setup guide for setting TailwindCSS with my Angular application. However there is no tailwind.config.js. I tried a lot of online blogs but didn't work. How can I setup tailwind.config.js and customize the behavior. Is there a another way to customize tailwind with Angular.

I even added tailwind.config.js manually but when I use those configuration, it didn't work. These are the version I m using.

• Angular v19.1
• TailwindCSS v4.0

TailwindCSS is working in my application but Is there a way to configure with tailwind.config.js.

Answer 1

TL;DR: Use @config directive.

From v4 onwards, the use of the tailwind.config.js file has been removed, and CSS-first directives are provided for configuration. The init process, which previously generated this config file by default, has also been discontinued. If you want to use a JS-based config file from v4 onwards, you must create it manually and specify its location in CSS using the @config directive so that v4 can find the configuration.

• Changed npx tailwindcss to npx @tailwindcss/cli - TailwindCSS v4 Docs
• Removed npx tailwindcss init process - StackOverflow
• Deprecated: Sass, Less and Stylus preprocessors support - StackOverflow
• CSS-first configuration instead of tailwind.config.js - TailwindCSS v4 Docs
• Use @config directive to legacy JavaScript-config - StackOverflow
• Automatic Source Detection - StackOverflow

TailwindCSS v4 is backwards compatible with v3

I see that you've created the old v3 legacy JavaScript-based configuration. In v4, this is no longer necessary due to the new CSS-first configuration, but you can still use it by adding an extra @config directive if needed.

Using a JavaScript config file

JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4.

If you still need to use a JavaScript config file, you can load it explicitly using the @config directive:

@config "../../tailwind.config.js";

• Using a JavaScript config file - TailwindCSS v4 Update Guide

The configuration setting has changed by default. However, you have the option to declare the location of your tailwind.config.js file using a relative path in your default CSS file so you can use it again.

New configuration option in v4

CSS-First Configuration: Customize and extend the framework directly in CSS instead of JavaScript.

With TailwindCSS v4, you have the option to omit the tailwind.config.js file. You can find many new directives, such as @theme, which allows you to declare your custom settings directly in your CSS file, or @plugin, which lets you import TailwindCSS v4-compatible plugins directly in your CSS file.

I won't list all the new directives, but you can check them out here:

• Functions and directives - TailwindCSS v4 Docs