Overview
TailwindCSS is a utility-first CSS framework that provides low-level utility classes to build application layouts. Mapping the Progress Design System tokens to the TailwindCSS classes can be achieved by exposing the Progress Design System tokens as CSS variables and utilizing them in the TailwindCSS configuration. This way, the Progress Design System tokens can be used in the TailwindCSS classes, providing a seamless integration between the two systems.
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 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.
-
Export the Kendo UI Theme variables to the
tailwind.config.jsfile through a preset:// Kendo Tailwind CSS Preset - kendo-tw-preset.jsmodule.exports = {theme: {extend: {spacing: {1: 'var( --kendo-spacing-1 )',1.5: 'var( --kendo-spacing-1.5 )',2: 'var( --kendo-spacing-2 )',2.5: 'var( --kendo-spacing-2.5 )',3: 'var( --kendo-spacing-3 )',3.5: 'var( --kendo-spacing-3.5 )',4: 'var( --kendo-spacing-4 )',4.5: 'var( --kendo-spacing-4.5 )',5: 'var( --kendo-spacing-5 )',5.5: 'var( --kendo-spacing-5.5 )',6: 'var( --kendo-spacing-6 )',6.5: 'var( --kendo-spacing-6.5 )',7: 'var( --kendo-spacing-7 )',7.5: 'var( --kendo-spacing-7.5 )',8: 'var( --kendo-spacing-8 )',9: 'var( --kendo-spacing-9 )',10: 'var( --kendo-spacing-10 )',11: 'var( --kendo-spacing-11 )',12: 'var( --kendo-spacing-12 )',13: 'var( --kendo-spacing-13 )',14: 'var( --kendo-spacing-14 )',15: 'var( --kendo-spacing-15 )',16: 'var( --kendo-spacing-16 )',17: 'var( --kendo-spacing-17 )',18: 'var( --kendo-spacing-18 )',19: 'var( --kendo-spacing-19 )',20: 'var( --kendo-spacing-20 )',21: 'var( --kendo-spacing-21 )',22: 'var( --kendo-spacing-22 )',23: 'var( --kendo-spacing-23 )',24: 'var( --kendo-spacing-24 )',25: 'var( --kendo-spacing-25 )',26: 'var( --kendo-spacing-26 )',27: 'var( --kendo-spacing-27 )',28: 'var( --kendo-spacing-28 )',29: 'var( --kendo-spacing-29 )',30: 'var( --kendo-spacing-30 )'},borderRadius: {'none': 'var( --kendo-border-radius-none )','sm': 'var( --kendo-border-radius-sm )',DEFAULT: 'var( --kendo-border-radius-md )','lg': 'var( --kendo-border-radius-lg )','xl': 'var( --kendo-border-radius-xl )','2xl': 'var( --kendo-border-radius-xxl )','3xl': 'var( --kendo-border-radius-xxxl )','full': 'var( --kendo-border-radius-none )',},boxShadow: {'sm': 'var( --kendo-elevation-2 )',DEFAULT: 'var( --kendo-elevation-4 )','lg': 'var( --kendo-elevation-6 )','xl': 'var( --kendo-elevation-8 )','2xl': 'var( --keno-elevation-9 )',},colors: {'app-surface': 'var( --kendo-color-app-surface )','on-app-surface': 'var( --kendo-color-on-app-surface )','subtle': 'var( --kendo-color-subtle )','surface': 'var( --kendo-color-surface )','surface-alt': 'var( --kendo-color-surface-alt )','border': 'var( --kendo-color-border )','border-alt': 'var( --kendo-color-border-alt )',base: {DEFAULT: 'var( --kendo-color-base )','hover': 'var( --kendo-color-base-hover )','active': 'var( --kendo-color-base-active )','emphasis': 'var( --kendo-color-base-emphasis )','subtle': 'var( --kendo-color-base-subtle )','subtle-hover': 'var( --kendo-color-base-subtle-hover )','subtle-active': 'var( --kendo-color-base-subtle-active)','on-subtle': 'var( --kendo-color-base-on-subtle )','on-surface': 'var( --kendo-color-base-on-surface )',},'on-base': 'var( --kendo-color-on-base )',primary: {DEFAULT: 'var( --kendo-color-primary )','hover': 'var( --kendo-color-primary-hover )','active': 'var( --kendo-color-primary-active )','emphasis': 'var( --kendo-color-primary-emphasis )','subtle': 'var( --kendo-color-primary-subtle )','subtle-hover': 'var( --kendo-color-primary-subtle-hover )','subtle-active': 'var( --kendo-color-primary-subtle-active)','on-subtle': 'var( --kendo-color-primary-on-subtle )','on-surface': 'var( --kendo-color-primary-on-surface )',},'on-primary': 'var( --kendo-color-on-primary )',secondary: {DEFAULT: 'var( --kendo-color-secondary )','hover': 'var( --kendo-color-secondary-hover )','active': 'var( --kendo-color-secondary-active )','emphasis': 'var( --kendo-color-secondary-emphasis )','subtle': 'var( --kendo-color-secondary-subtle )','subtle-hover': 'var( --kendo-color-secondary-subtle-hover )','subtle-active': 'var( --kendo-color-secondary-subtle-active)','on-subtle': 'var( --kendo-color-secondary-on-subtle )','on-surface': 'var( --kendo-color-secondary-on-surface )',},'on-secondary': 'var( --kendo-color-on-secondary )',tertiary: {DEFAULT: 'var( --kendo-color-tertiary )','hover': 'var( --kendo-color-tertiary-hover )','active': 'var( --kendo-color-tertiary-active )','emphasis': 'var( --kendo-color-tertiary-emphasis )','subtle': 'var( --kendo-color-tertiary-subtle )','subtle-hover': 'var( --kendo-color-tertiary-subtle-hover )','subtle-active': 'var( --kendo-color-tertiary-subtle-active)','on-subtle': 'var( --kendo-color-tertiary-on-subtle )','on-surface': 'var( --kendo-color-tertiary-on-surface )',},'on-tertiary': 'var( --kendo-color-on-tertiary )',light: {DEFAULT: 'var( --kendo-color-light )','hover': 'var( --kendo-color-light-hover )','active': 'var( --kendo-color-light-active )','emphasis': 'var( --kendo-color-light-emphasis )','subtle': 'var( --kendo-color-light-subtle )','subtle-hover': 'var( --kendo-color-light-subtle-hover )','subtle-active': 'var( --kendo-color-light-subtle-active)','on-subtle': 'var( --kendo-color-light-on-subtle )','on-surface': 'var( --kendo-color-light-on-surface )',},'on-light': 'var( --kendo-color-on-light )',dark: {DEFAULT: 'var( --kendo-color-dark )','hover': 'var( --kendo-color-dark-hover )','active': 'var( --kendo-color-dark-active )','emphasis': 'var( --kendo-color-dark-emphasis )','subtle': 'var( --kendo-color-dark-subtle )','subtle-hover': 'var( --kendo-color-dark-subtle-hover )','subtle-active': 'var( --kendo-color-dark-subtle-active)','on-subtle': 'var( --kendo-color-dark-on-subtle )','on-surface': 'var( --kendo-color-dark-on-surface )',},'on-dark': 'var( --kendo-color-on-dark )',info: {DEFAULT: 'var( --kendo-color-info )','hover': 'var( --kendo-color-info-hover )','active': 'var( --kendo-color-info-active )','emphasis': 'var( --kendo-color-info-emphasis )','subtle': 'var( --kendo-color-info-subtle )','subtle-hover': 'var( --kendo-color-info-subtle-hover )','subtle-active': 'var( --kendo-color-info-subtle-active)','on-subtle': 'var( --kendo-color-info-on-subtle )','on-surface': 'var( --kendo-color-info-on-surface )',},'on-info': 'var( --kendo-color-on-info )',success: {DEFAULT: 'var( --kendo-color-success )','hover': 'var( --kendo-color-success-hover )','active': 'var( --kendo-color-success-active )','emphasis': 'var( --kendo-color-success-emphasis )','subtle': 'var( --kendo-color-success-subtle )','subtle-hover': 'var( --kendo-color-success-subtle-hover )','subtle-active': 'var( --kendo-color-success-subtle-active)','on-subtle': 'var( --kendo-color-success-on-subtle )','on-surface': 'var( --kendo-color-success-on-surface )',},'on-success': 'var( --kendo-color-on-success )',error: {DEFAULT: 'var( --kendo-color-error )','hover': 'var( --kendo-color-error-hover )','active': 'var( --kendo-color-error-active )','emphasis': 'var( --kendo-color-error-emphasis )','subtle': 'var( --kendo-color-error-subtle )','subtle-hover': 'var( --kendo-color-error-subtle-hover )','subtle-active': 'var( --kendo-color-error-subtle-active)','on-subtle': 'var( --kendo-color-error-on-subtle )','on-surface': 'var( --kendo-color-error-on-surface )',},'on-error': 'var( --kendo-color-on-error )',warning: {DEFAULT: 'var( --kendo-color-warning )','hover': 'var( --kendo-color-warning-hover )','active': 'var( --kendo-color-warning-active )','emphasis': 'var( --kendo-color-warning-emphasis )','subtle': 'var( --kendo-color-warning-subtle )','subtle-hover': 'var( --kendo-color-warning-subtle-hover )','subtle-active': 'var( --kendo-color-warning-subtle-active)','on-subtle': 'var( --kendo-color-warning-on-subtle )','on-surface': 'var( --kendo-color-warning-on-surface )',},'on-warning': 'var( --kendo-color-on-warning )','series-a': {DEFAULT: 'var( --kendo-color-series-a )','subtle': 'var( --kendo-color-series-a-subtle )','subtler': 'var( --kendo-color-series-a-subtler )','bold': 'var( --kendo-color-series-a-bold )','bolder': 'var( --kendo-color-series-a-bolder )'},'series-b': {DEFAULT: 'var( --kendo-color-series-b )','subtle': 'var( --kendo-color-series-b-subtle )','subtler': 'var( --kendo-color-series-b-subtler )','bold': 'var( --kendo-color-series-b-bold )','bolder': 'var( --kendo-color-series-b-bolder )'},'series-c': {DEFAULT: 'var( --kendo-color-series-c )','subtle': 'var( --kendo-color-series-c-subtle )','subtler': 'var( --kendo-color-series-c-subtler )','bold': 'var( --kendo-color-series-c-bold )','bolder': 'var( --kendo-color-series-c-bolder )'},'series-d': {DEFAULT: 'var( --kendo-color-series-d )','subtle': 'var( --kendo-color-series-d-subtle )','subtler': 'var( --kendo-color-series-d-subtler )','bold': 'var( --kendo-color-series-d-bold )','bolder': 'var( --kendo-color-series-d-bolder )'},'series-e': {DEFAULT: 'var( --kendo-color-series-e )','subtle': 'var( --kendo-color-series-e-subtle )','subtler': 'var( --kendo-color-series-e-subtler )','bold': 'var( --kendo-color-series-e-bold )','bolder': 'var( --kendo-color-series-e-bolder )'},'series-f': {DEFAULT: 'var( --kendo-color-series-f )','subtle': 'var( --kendo-color-series-f-subtle )','subtler': 'var( --kendo-color-series-f-subtler )','bold': 'var( --kendo-color-series-f-bold )','bolder': 'var( --kendo-color-series-f-bolder )'}}}}} -
Import the Kendo UI Theme preset in the
tailwind.config.jsfile:/** @type {import('tailwindcss').Config} */import kendoTwPreset from './kendo-tw-preset.js';export default {content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],presets: [ kendoTwPreset ],theme: {extend: {colors: {}},},plugins: [],} -
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: theme('colors.fuchsia.100');--kendo-color-primary-subtle-hover: theme('colors.fuchsia.200');--kendo-color-primary-subtle-active: theme('colors.fuchsia.300');--kendo-color-primary: theme('colors.fuchsia.600');--kendo-color-primary-hover: theme('colors.fuchsia.800');--kendo-color-primary-active: theme('colors.fuchsia.900');--kendo-color-primary-emphasis: theme('colors.fuchsia.500');--kendo-color-primary-on-subtle: theme('colors.fuchsia.900');--kendo-color-on-primary: theme('colors.white');--kendo-color-primary-on-surface: theme('colors.fuchsia.600');}
Approach 2: Projects with Existing TailwindCSS Configuration
-
Expose the TailwindCSS configuration as CSS variables:
/* Set the CSS variables */--tw-color-primary: 255 115 179;--tw-color-secondary: 111 114 185;// Utilize the CSS variables in the tailwind.config.js filemodule.exports = {theme: {extend: {colors: {"color-primary": 'rgb(var(--tw-color-primary))'"color-secondary": 'rgb(var(--tw-color-secondary))'},},},}; -
Map the Kendo UI Theme variables to the TailwindCSS variables:
<style>:root {--kendo-color-primary: var(--tw-color-accent);--kendo-color-secondary: var(--tw-color-secondary);}</style>
In this way, when changing the Tailwind config, this will automatically also change the styling of the Kendo components where those variables are used, as well as the generated classes from TailwindCSS.
