Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 16, 2021 02:47 pm GMT

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.


Original Link: https://dev.to/godwindaniel10/how-to-add-tailwind-css-to-your-angular-application-2021-32gj

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To