How to setup Tailwind CSS in Angular

Tailwind CSS lets you style elements using utility classes like flex, text-center, and bg-blue-500. Angular is a web framework for building modern web applications using TypeScript. Using Tailwind CSS with Angular allows you to style Angular components directly with utility classes.

1. How to Set Up Tailwind CSS with Angular

Step 1: Create a New Angular Project

If you do not already have an Angular project, create one using the Angular CLI:

ng new my-app

After the project is created, move into the project directory:

cd my-app

Start the Angular development server:

ng serve --open

The --open option automatically opens the application in your default browser. If the setup is successful, you should see the default Angular application in the browser.

Step 2: Install Tailwind CSS

The recommended way to add Tailwind CSS to an Angular project is to use the Angular CLI's ng add command. From the root directory of your Angular project, run:

ng add tailwindcss

Step 3: Use Tailwind CSS in an Angular Component

Open the main Angular component template. Depending on your Angular project structure, this may be:

src/app/app.html

or:

src/app/app.component.html

Add the following code:

<div class="text-center">
  <h1 class="p-7 text-5xl font-bold text-green-800">
    Hello World
  </h1>

  <p class="text-3xl text-indigo-700">
    Styled with Tailwind CSS
  </p>
</div>

Here are some of the Tailwind CSS utility classes used in the example:

• text-center centers the text.
• p-7 adds padding around the element.
• text-5xl and text-3xl set the font sizes.
• font-bold makes the heading bold.
• text-green-800 sets the heading's text color.
• text-indigo-700 sets the paragraph's text color.

Save the file and run the development server if it is not already running:

ng serve

2. Alternative: Manual Setup with PostCSS

The ng add tailwindcss command is the recommended way to configure Tailwind CSS in Angular. However, you can also configure Tailwind CSS manually using PostCSS.

First, install Tailwind CSS and the required PostCSS packages:

npm install tailwindcss @tailwindcss/postcss postcss

Next, create a .postcssrc.json file in the root directory of your Angular project:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Then open your global stylesheet, usually:

src/styles.css

and add:

@import "tailwindcss";

Tailwind CSS is now included in the Angular application's global styles.

3. Using the Tailwind CSS Play CDN

Tailwind CSS also provides a Play CDN for experimenting with Tailwind CSS directly in the browser without configuring a build process.

Add the following script to an HTML page:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

You can then use Tailwind CSS utility classes in your HTML:

<div class="text-center">
  <h1 class="text-4xl font-bold text-blue-600">
    Hello, Tailwind CSS!
  </h1>
</div>

The Play CDN is useful for experimentation and quick prototypes. For an Angular application, use the Angular/Tailwind integration instead of relying on the Play CDN for production.

Example: Building a Simple Angular UI with Tailwind CSS

The following example combines several Tailwind CSS utilities to create a centered section with a heading, paragraph, and button:

<div class="flex min-h-screen items-center justify-center">
  <div class="text-center">
    <h1 class="text-5xl font-bold text-green-800">
      Hello World
    </h1>

    <p class="mt-4 text-2xl text-indigo-700">
      Built with Angular and Tailwind CSS
    </p>

    <button
      class="mt-6 rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white hover:bg-blue-700"
    >
      Learn More
    </button>
  </div>
</div>

The example uses several Tailwind CSS utilities:

• flex enables Flexbox.
• min-h-screen sets the minimum height to the viewport height.
• items-center vertically centers the content.
• justify-center horizontally centers the content.
• text-center centers the text.
• text-5xl sets a large font size.
• font-bold makes the heading bold.
• mt-4 and mt-6 add top margins.
• rounded-lg adds rounded corners.
• bg-blue-600 sets the button's background color.
• px-6 and py-3 add horizontal and vertical padding.
• text-white changes the button text color to white.
• hover:bg-blue-700 changes the button background color when the user hovers over it.