Tailwind CSS Integration with Ignite UI for Angular

Overview

ng add igniteui-angular

1. Install Tailwind

Install tailwind using the following command:

npm install tailwindcss @tailwindcss/postcss postcss --force

2.Configure PostCSS Plugins

Create a .postcssrc.json file in the root of your project and add the @tailwindcss/postcss plugin to your PostCSS configuration.

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

3.Import Tailwind CSS

In your main stylesheet (styles.css or styles.scss), import Tailwind and the Ignite UI Tailwind theme configuration.

@import "tailwindcss";
@import "igniteui-theming/tailwind/themes/base";

If your project uses sass for styling:

@import "tailwindcss";
@use "igniteui-theming/tailwind/themes/base";

Ensure the import path resolves correctly from node_modules.

Using Ignite UI Custom Utility Classes

The igniteui-theming package includes a custom Tailwind configuration that exposes Ignite UI design tokens through utility classes. These include support for:

• Colors and contrast colors

• Elevation (shadows)

• Typography styles

Let’s look at how to use each.

Color Utility Classes

Use Ignite UI color tokens directly in your HTML:

<h1 class="bg-primary-500 text-primary-500-contrast">This is a title</h1>

You can explore Tailwind’s full color system in the Tailwind color documentation, and apply it using the Ignite UI-provided class names.

Shadow utility classes

You can add depth using any of the predefined elevation levels (from 0 to 24):

<div class="shadow-elevation-8">
Elevated container
</div>

You can find all the shadow-related utility classes provided by Tailwind in the Tailwind box shadow documentation

Typography custom utility styles

To apply the font, add the font-ig class to a top-level element. You can also define the base font size using the text-base utility class. We provide custom utility classes for each typography level (e.g., h1, h2, body-1). Use them like so:

<div class="type-style-h3">
This paragraph gets the h3 styles
</div>

Each class applies all necessary font settings, spacing, and sizing according to the Ignite UI type scale.

Sample

In the sample below, you’ll see a 404 page built entirely with Tailwind utility classes, including our custom utilities for shadows, colors, and typography.

You can see how to style each component by checking out the Styling section in its respective documentation topic.

Summary

With just a few configuration steps, you can combine Tailwind’s utility-first approach with Ignite UI’s robust design system. This integration allows you to rapidly build consistent, themed UI components using well-defined tokens for color, elevation, and typography—right from your HTML.

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub