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.
Top comments (3)
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
Do I have to 'ng serve' every time I change my custom tailwind config to render the changes?
yes