DEV Community

Cover image for How to Add Tailwind CSS to Your Angular Application 2021
Godwin Daniel
Godwin Daniel

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

follow the instructions below:

   ? Would you like to enable dark mode?

     none
     class
     media
Enter fullscreen mode Exit fullscreen mode

select class then click (enter)

   ? Would you like to use tailwind directives and functions in 
     component styles? (might increase build time) (y/N) y
Enter fullscreen mode Exit fullscreen mode
   ? What @tailwindcss plugins do you want to enable?

     â­• aspect-ratio
     ⭕ forms ✔
     â­• Line-clamp
     ⭕ typography ✔
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
jeanfern profile image
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

Collapse
 
klylylydeee profile image
Klyde Guevarra

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

Collapse
 
godwindaniel10 profile image
Godwin Daniel

yes