Tailwind CSS Integration with Ignite UI for Angular

    Ignite UI for Angular offers full theming customization through CSS variables and a powerful Sass engine. In this guide, you'll learn how to integrate Tailwind CSS into an Angular project and enhance it with custom utility classes provided by the `igniteui-theming` package. These classes expose Ignite UI design tokens for colors, shadows, and typography, enabling a seamless utility-first styling experience.


    Overview

    Note

    This guide assumes you already have Ignite UI for Angular installed. If not, run:

    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:

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

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

    Note

    These custom typography utilities only work outside of ig-typography. If you have to set the ig-typography CSS class on a top-level element, these styles won't apply.

    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.

    Note

    This sample is fictional and fully custom, it’s not part of the Ignite UI component library.

    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.