Cracked Skin Image Created Using CSS

Godwin Daniel — Fri, 18 Jun 2021 16:56:36 +0000

How to Add Tailwind CSS to Your Angular Application 2021

Godwin Daniel — Tue, 16 Mar 2021 14:47:52 +0000

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.

DEV Community: Godwin Daniel

Cracked Skin Image Created Using CSS

How to Add Tailwind CSS to Your Angular Application 2021

1. Generate a new Angular application

2. Install the needed tailwind dependencies

3. Enjoy