How to Add Tailwind CSS to Your Angular Application 2021

According to the official documentation, Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. I like to think of it as a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS. Angular, on the other hand, is a platform that allows you to build high-quality enterprise applications. Combine Angular with Tailwind CSS and you have a perfect stack for building top-notch web applications.

In this article, I will walk you through how you can add
Tailwind CSS to your Angular application.

🚩 This article assumes that you're using the Angular CLI
version 11.2.0 or higher.

1. Generate a new Angular application

Let's start by creating a new Angular project using the ng new command:

   ng new my-app

When the CLI asks you "which stylesheet format would you like to use?" choose CSS because:

• With Tailwind, you don't need a CSS preprocessor like Sass.
  You'll rarely need to write custom CSS anyway.

• Your CSS will compile much faster because it won't need to
  pass through multiple compilation pipelines.

2. Install the needed tailwind dependencies

Now, install the required dependencies:

   ng add @ngneat/tailwind

follow the instructions below:

   ? Would you like to enable dark mode?

     none
     class
     media

select class then click (enter)

   ? Would you like to use tailwind directives and functions in 
     component styles? (might increase build time) (y/N) y

   ? What @tailwindcss plugins do you want to enable?

     ⭕ aspect-ratio
     ⭕ forms ✔
     ⭕ Line-clamp
     ⭕ typography ✔

select forms & typography

The command above install all needed packages and update the
project files.

3. Enjoy

You can now start your Angular application and enjoy using Tailwind:

   ng serve --open

---

If you enjoyed this article, follow [@CodeBase__](https://twitter.com/CodeBase__) on Twitter for more content like this.

Comments

[jeanfern]

Hi @godwindaniel10 , I followed your instructions to set Angular + Tailwind for study purposes.
I am testing Vue, React and Angular with Tailwind, builidng the same project.
I found a problem with it on Angular and report it on github:
github.com/ngneat/tailwind/issues/100

[Klyde Guevarra]

Do I have to 'ng serve' every time I change my custom tailwind config to render the changes?

[Godwin Daniel]

yes