Skip to content

Custom Tailwind Classes (Draft)

Jump to bottom
Dilyana Yarabanova edited this page Jun 26, 2025 · 2 revisions

Using Custom Tailwind Utility Classes

The Ignite UI Theming package provides Tailwind-compatible utility classes for colors, typography, and shadows—built on top of the Ignite UI design token system. These classes can be used in any frontend framework that supports Tailwind CSS.

This guide walks you through installing Tailwind and integrating Ignite UI’s utility classes into your project.

Tailwind Setup

Start by installing Tailwind CSS for your 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";

Ensure these paths resolve correctly from node_modules.

Including a Theme Preset

If you haven’t already included a theme in your project—or if you'd like to apply a specific set of theme variables—you can use one of the available predefined themes by adding it to your global styles configuration (e.g., angular.json, vite.config.js, or webpack.config.js). Example:

"styles": [
    "src/styles.css",
    "node_modules/igniteui-theming/tailwind/presets/material-light.css"
],

You can replace material-light.css with any other preset available in the igniteui-theming/tailwind/presets/ directory.

Available Ignite UI Utility Classes

These classes extend Tailwind with Ignite UI tokens:

Color Classes

  • bg-primary-500, text-secondary-800, border-error-300, etc.
  • Each color includes its contrast variant: text-primary-500-contrast, bg-surface-300-contrast, etc.

Based on Ignite UI Color Palettes

Shadow / Elevation Classes

  • shadow-elevation-0 to shadow-elevation-24

Based on Igniteui UI Elevations

Typography Utility Classes

  • font-ig - applies the default font family defined in the design schema. Add this class to a top-level container to apply it across your entire application.
  • text-base - Sets the base font size, useful when you want a consistent starting point for text sizing.
  • type-style-h1, type-style-h2, ..., type-style-body-2, etc. - applies all font properties (size, weight, spacing, line-height) according to the Ignite UI type scale

NOTE: The typography utility classes work only when not nested inside an ig-typography block.

All class names follow standard Tailwind naming conventions, so they can be combined with other Tailwind classes.

Clone this wiki locally