Tailwind CSS Integration with Ignite UI for React

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

Overview

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

npm install igniteui-theming

Tailwind Setup

Start by installing Tailwind CSS, according to your chosen build tool or framework by following the official Tailwind installation guide.

Once Tailwind is set up, import both Tailwind and the Ignite UI theming configuration in your global stylesheet.

@import 'tailwindcss';
@import 'igniteui-theming/tailwind/theme';

If your project uses sass for styling:

@import "tailwindcss";
@use "igniteui-theming/tailwind/theme";

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

Our color utility classes are powered by tokens from each Ignite UI theme. You can apply them directly in your HTML:

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

You can explore Tailwind’s full color system in this topic, 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 className="shadow-elevation-8">Elevated container</div>

You can find all the shadow-related utility classes provided by Tailwind in this topic

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 className="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.

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.