Overview
TailwindCSS is a utility-first CSS framework that provides low-level utility classes to build application layouts. In TailwindCSS v4, theme configuration is CSS-first—you define design tokens using the @theme directive, and all theme values are automatically exposed as CSS variables. This makes integrating with the Progress Design System tokens straightforward: map the Kendo UI Theme CSS variables directly to Tailwind theme variables using @theme, enabling seamless use of your design tokens through TailwindCSS utility classes.
The integration can be achieved by using two different approaches, depending on the project setup.
Prerequisites
Before proceeding with the integration scenarios, make sure you have the following prerequisites:
-
Install & setup TailwindCSS v4 in your project by following the official TailwindCSS installation guide.
-
Install & setup the Kendo UI Theme of choice in your project by following the official Kendo UI Theme installation guide.
Approach 1: Projects with New TailwindCSS Setup
This approach describes the user flow, where the user has no existing tailwind configuration and is familiar with the Progress Design System.
-
Create a CSS file that maps the Kendo UI Theme variables to TailwindCSS theme variables using the
@themedirective./* Kendo TailwindCSS Preset - kendo-tw-preset.css */@theme inline {/* Spacing */--spacing: var(--kendo-spacing-base);/* Border Radius */--radius-sm: var(--kendo-border-radius-sm);--radius-md: var(--kendo-border-radius-md);--radius-lg: var(--kendo-border-radius-lg);--radius-xl: var(--kendo-border-radius-xl);--radius-2xl: var(--kendo-border-radius-xxl);--radius-3xl: var(--kendo-border-radius-xxxl);/* Shadows (Elevation) */--shadow-xs: var(--kendo-elevation-1);--shadow-sm: var(--kendo-elevation-2);--shadow-lg: var(--kendo-elevation-3);--shadow-xl: var(--kendo-elevation-4);--shadow-2xl: var(--kendo-elevation-5);/* Font Family */--font-sans: var(--kendo-font-family-sans);--font-serif: var(--kendo-font-family-serif);--font-sans-serif: var(--kendo-font-family-sans-serif);--font-mono: var(--kendo-font-family-monospace);/* Font Weight */--font-weight-thin: var(--kendo-font-weight-thin);--font-weight-extralight: var(--kendo-font-weight-extra-light);--font-weight-light: var(--kendo-font-weight-light);--font-weight-normal: var(--kendo-font-weight-normal);--font-weight-medium: var(--kendo-font-weight-medium);--font-weight-semibold: var(--kendo-font-weight-semibold);--font-weight-bold: var(--kendo-font-weight-bold);--font-weight-extrabold: var(--kendo-font-weight-extra-bold);--font-weight-black: var(--kendo-font-weight-black);/* Font Size */--text-xxs: var(--kendo-font-size-xxs);--text-xs: var(--kendo-font-size-xs);--text-sm: var(--kendo-font-size-sm);--text-md: var(--kendo-font-size-md);--text-lg: var(--kendo-font-size-lg);--text-xl: var(--kendo-font-size-xl);/* Line Height */--leading-tight: var(--kendo-line-height-xs);--leading-snug: var(--kendo-line-height-sm);--leading-normal: var(--kendo-line-height-md);--leading-relaxed: var(--kendo-line-height-lg);/* Letter Spacing */--tracking-tightest: var(--kendo-letter-spacing-tightest);--tracking-tighter: var(--kendo-letter-spacing-tighter);--tracking-tight: var(--kendo-letter-spacing-tight);--tracking-normal: var(--kendo-letter-spacing-normal);--tracking-wide: var(--kendo-letter-spacing-wide);--tracking-wider: var(--kendo-letter-spacing-wider);--tracking-widest: var(--kendo-letter-spacing-widest);/* Colors — Surface & Border */--color-app-surface: var(--kendo-color-app-surface);--color-on-app-surface: var(--kendo-color-on-app-surface);--color-subtle: var(--kendo-color-subtle);--color-surface: var(--kendo-color-surface);--color-surface-alt: var(--kendo-color-surface-alt);--color-border: var(--kendo-color-border);--color-border-alt: var(--kendo-color-border-alt);/* Colors — Base */--color-base: var(--kendo-color-base);--color-base-hover: var(--kendo-color-base-hover);--color-base-active: var(--kendo-color-base-active);--color-base-emphasis: var(--kendo-color-base-emphasis);--color-base-subtle: var(--kendo-color-base-subtle);--color-base-subtle-hover: var(--kendo-color-base-subtle-hover);--color-base-subtle-active: var(--kendo-color-base-subtle-active);--color-base-on-subtle: var(--kendo-color-base-on-subtle);--color-base-on-surface: var(--kendo-color-base-on-surface);--color-on-base: var(--kendo-color-on-base);/* Colors — Primary */--color-primary: var(--kendo-color-primary);--color-primary-hover: var(--kendo-color-primary-hover);--color-primary-active: var(--kendo-color-primary-active);--color-primary-emphasis: var(--kendo-color-primary-emphasis);--color-primary-subtle: var(--kendo-color-primary-subtle);--color-primary-subtle-hover: var(--kendo-color-primary-subtle-hover);--color-primary-subtle-active: var(--kendo-color-primary-subtle-active);--color-primary-on-subtle: var(--kendo-color-primary-on-subtle);--color-primary-on-surface: var(--kendo-color-primary-on-surface);--color-on-primary: var(--kendo-color-on-primary);/* Colors — Secondary */--color-secondary: var(--kendo-color-secondary);--color-secondary-hover: var(--kendo-color-secondary-hover);--color-secondary-active: var(--kendo-color-secondary-active);--color-secondary-emphasis: var(--kendo-color-secondary-emphasis);--color-secondary-subtle: var(--kendo-color-secondary-subtle);--color-secondary-subtle-hover: var(--kendo-color-secondary-subtle-hover);--color-secondary-subtle-active: var(--kendo-color-secondary-subtle-active);--color-secondary-on-subtle: var(--kendo-color-secondary-on-subtle);--color-secondary-on-surface: var(--kendo-color-secondary-on-surface);--color-on-secondary: var(--kendo-color-on-secondary);/* Colors — Tertiary */--color-tertiary: var(--kendo-color-tertiary);--color-tertiary-hover: var(--kendo-color-tertiary-hover);--color-tertiary-active: var(--kendo-color-tertiary-active);--color-tertiary-emphasis: var(--kendo-color-tertiary-emphasis);--color-tertiary-subtle: var(--kendo-color-tertiary-subtle);--color-tertiary-subtle-hover: var(--kendo-color-tertiary-subtle-hover);--color-tertiary-subtle-active: var(--kendo-color-tertiary-subtle-active);--color-tertiary-on-subtle: var(--kendo-color-tertiary-on-subtle);--color-tertiary-on-surface: var(--kendo-color-tertiary-on-surface);--color-on-tertiary: var(--kendo-color-on-tertiary);/* Colors — Light */--color-light: var(--kendo-color-light);--color-light-hover: var(--kendo-color-light-hover);--color-light-active: var(--kendo-color-light-active);--color-light-emphasis: var(--kendo-color-light-emphasis);--color-light-subtle: var(--kendo-color-light-subtle);--color-light-subtle-hover: var(--kendo-color-light-subtle-hover);--color-light-subtle-active: var(--kendo-color-light-subtle-active);--color-light-on-subtle: var(--kendo-color-light-on-subtle);--color-light-on-surface: var(--kendo-color-light-on-surface);--color-on-light: var(--kendo-color-on-light);/* Colors — Dark */--color-dark: var(--kendo-color-dark);--color-dark-hover: var(--kendo-color-dark-hover);--color-dark-active: var(--kendo-color-dark-active);--color-dark-emphasis: var(--kendo-color-dark-emphasis);--color-dark-subtle: var(--kendo-color-dark-subtle);--color-dark-subtle-hover: var(--kendo-color-dark-subtle-hover);--color-dark-subtle-active: var(--kendo-color-dark-subtle-active);--color-dark-on-subtle: var(--kendo-color-dark-on-subtle);--color-dark-on-surface: var(--kendo-color-dark-on-surface);--color-on-dark: var(--kendo-color-on-dark);/* Colors — Info */--color-info: var(--kendo-color-info);--color-info-hover: var(--kendo-color-info-hover);--color-info-active: var(--kendo-color-info-active);--color-info-emphasis: var(--kendo-color-info-emphasis);--color-info-subtle: var(--kendo-color-info-subtle);--color-info-subtle-hover: var(--kendo-color-info-subtle-hover);--color-info-subtle-active: var(--kendo-color-info-subtle-active);--color-info-on-subtle: var(--kendo-color-info-on-subtle);--color-info-on-surface: var(--kendo-color-info-on-surface);--color-on-info: var(--kendo-color-on-info);/* Colors — Success */--color-success: var(--kendo-color-success);--color-success-hover: var(--kendo-color-success-hover);--color-success-active: var(--kendo-color-success-active);--color-success-emphasis: var(--kendo-color-success-emphasis);--color-success-subtle: var(--kendo-color-success-subtle);--color-success-subtle-hover: var(--kendo-color-success-subtle-hover);--color-success-subtle-active: var(--kendo-color-success-subtle-active);--color-success-on-subtle: var(--kendo-color-success-on-subtle);--color-success-on-surface: var(--kendo-color-success-on-surface);--color-on-success: var(--kendo-color-on-success);/* Colors — Error */--color-error: var(--kendo-color-error);--color-error-hover: var(--kendo-color-error-hover);--color-error-active: var(--kendo-color-error-active);--color-error-emphasis: var(--kendo-color-error-emphasis);--color-error-subtle: var(--kendo-color-error-subtle);--color-error-subtle-hover: var(--kendo-color-error-subtle-hover);--color-error-subtle-active: var(--kendo-color-error-subtle-active);--color-error-on-subtle: var(--kendo-color-error-on-subtle);--color-error-on-surface: var(--kendo-color-error-on-surface);--color-on-error: var(--kendo-color-on-error);/* Colors — Warning */--color-warning: var(--kendo-color-warning);--color-warning-hover: var(--kendo-color-warning-hover);--color-warning-active: var(--kendo-color-warning-active);--color-warning-emphasis: var(--kendo-color-warning-emphasis);--color-warning-subtle: var(--kendo-color-warning-subtle);--color-warning-subtle-hover: var(--kendo-color-warning-subtle-hover);--color-warning-subtle-active: var(--kendo-color-warning-subtle-active);--color-warning-on-subtle: var(--kendo-color-warning-on-subtle);--color-warning-on-surface: var(--kendo-color-warning-on-surface);--color-on-warning: var(--kendo-color-on-warning);/* Colors — Series */--color-series-a: var(--kendo-color-series-a);--color-series-a-subtle: var(--kendo-color-series-a-subtle);--color-series-a-subtler: var(--kendo-color-series-a-subtler);--color-series-a-bold: var(--kendo-color-series-a-bold);--color-series-a-bolder: var(--kendo-color-series-a-bolder);--color-series-b: var(--kendo-color-series-b);--color-series-b-subtle: var(--kendo-color-series-b-subtle);--color-series-b-subtler: var(--kendo-color-series-b-subtler);--color-series-b-bold: var(--kendo-color-series-b-bold);--color-series-b-bolder: var(--kendo-color-series-b-bolder);--color-series-c: var(--kendo-color-series-c);--color-series-c-subtle: var(--kendo-color-series-c-subtle);--color-series-c-subtler: var(--kendo-color-series-c-subtler);--color-series-c-bold: var(--kendo-color-series-c-bold);--color-series-c-bolder: var(--kendo-color-series-c-bolder);--color-series-d: var(--kendo-color-series-d);--color-series-d-subtle: var(--kendo-color-series-d-subtle);--color-series-d-subtler: var(--kendo-color-series-d-subtler);--color-series-d-bold: var(--kendo-color-series-d-bold);--color-series-d-bolder: var(--kendo-color-series-d-bolder);--color-series-e: var(--kendo-color-series-e);--color-series-e-subtle: var(--kendo-color-series-e-subtle);--color-series-e-subtler: var(--kendo-color-series-e-subtler);--color-series-e-bold: var(--kendo-color-series-e-bold);--color-series-e-bolder: var(--kendo-color-series-e-bolder);--color-series-f: var(--kendo-color-series-f);--color-series-f-subtle: var(--kendo-color-series-f-subtle);--color-series-f-subtler: var(--kendo-color-series-f-subtler);--color-series-f-bold: var(--kendo-color-series-f-bold);--color-series-f-bolder: var(--kendo-color-series-f-bolder);}
The example above demonstrates a possible mapping between TailwindCSS utility variables and Kendo UI Theme CSS variables. You can customize this mapping to fit your project needs by choosing which Tailwind theme variables to connect to which Kendo design tokens.
-
Import the Kendo theme preset in your main CSS file alongside TailwindCSS:
@import 'tailwindcss';@import './kendo-tw-preset.css'; -
Use the Kendo UI Theme variables in your TailwindCSS classes:
<div class="p-4 rounded-lg shadow-lg bg-primary">...</div>As the Kendo components do not utilize TailwindCSS classes in their markup, any customization to the appearance of the Kendo components can be achieved through the Progress Design System tokens:
.dark {/* Primary */--kendo-color-primary-subtle: var(--color-fuchsia-100);--kendo-color-primary-subtle-hover: var(--color-fuchsia-200);--kendo-color-primary-subtle-active: var(--color-fuchsia-300);--kendo-color-primary: var(--color-fuchsia-600);--kendo-color-primary-hover: var(--color-fuchsia-800);--kendo-color-primary-active: var(--color-fuchsia-900);--kendo-color-primary-emphasis: var(--color-fuchsia-500);--kendo-color-primary-on-subtle: var(--color-fuchsia-900);--kendo-color-on-primary: var(--color-white);--kendo-color-primary-on-surface: var(--color-fuchsia-600);}
Approach 2: Projects with Existing TailwindCSS Configuration
-
Define your TailwindCSS theme colors in your CSS file using the
@themedirective:@import 'tailwindcss';@theme {--color-brand: oklch(0.65 0.2 340);--color-accent: oklch(0.55 0.15 270);} -
Map the Kendo UI Theme variables to the TailwindCSS theme variables:
:root {--kendo-color-primary: var(--color-brand);--kendo-color-secondary: var(--color-accent);}
In this way, when changing the Tailwind theme, this will automatically also change the styling of the Kendo components where those variables are used, as well as the generated classes from TailwindCSS.
