In this tutorial, we will go over how to install Tailwind 4 and its official plugins to your existing Angular project. If you haven't already created an Angular project, you can easily do it by running the following command in your terminal (just make sure you have Node.js and Angular CLI installed):

ng new my-angular-app --style css

Step 1: Install Tailwind 4 and its official plugins

Next, you need to install Tailwind CSS and its PostCSS plugin in your project. You can do this by running the following command:

npm install tailwindcss @tailwindcss/postcss postcss --force

Moreover, adding the official plugins is easy and a command away:

npm install @tailwindcss/typography @tailwindcss/forms

Step 2: Configure the Tailwind 4 PostCSS plugin

Afterwards, you must configure the Tailwind CSS PostCSS plugin in your PostCSS configuration file. Create the .postcssrc.json file in the root folder of your project and add the following:

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

Step 3: Tailwind 4 CSS configuration

Finally, you must import Tailwind CSS and the official Forms and Typography plugins in your src/styles.css file. As a bonus, you can also enable a class based dark mode configuration just by adding a simple line. This ensures that you can toggle dark mode on your own by toggling the dark class to your html element instead of letting it enabled or disabled automatically based on your system preference.

@import "tailwindcss";

/* Plugins */
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

/* Class based dark mode */
@custom-variant dark (&:where(.dark, .dark *));

This is the file where you can include our custom Tailkit configuration to make sure that all UI components render correctly.

Step 4: Start building

That's it, you are now ready and only have to start your build process..

ng serve

..before putting together your UI with Tailwind 4 classes.

I hope that this tutorial helped you get started but be sure to also check out our Tailkit Angular Starter Kit which has everything ready out of the box.

Happy coding, build something amazing!

How to install Tailwind CSS v4 to your Angular project

2,000+ handcrafted snippets.Now in your AI editor.

2,000+ handcrafted snippets.
Now in your AI editor.