New to KendoReact? Start a free 30-day trial
Themes + Tailwind CSS
This article demonstrates how to integrate Tailwind CSS with the Kendo UI Themes, showcasing the seamless use of utility classes alongside KendoReact components for a consistent and customizable design system.
The source code of the application is located in this GitHub repository.
Open the sample in a new tab to explore its responsive design, built with Tailwind CSS utility classes.
Customizing Styled KendoReact Components with Tailwind CSS
Since KendoReact components do not natively utilize Tailwind CSS utility classes in their markup, you cannot style them directly using Tailwind CSS class names. Instead, you can customize their visual appearance by overriding the corresponding Kendo UI theme variables with default Tailwind CSS variables or with your own custom variables.
css
/* Define custom variables */
--custom-tw-blue: #3d57d8;
--custom-tw-red: #eb0249;
--custom-tw-info: #225eff;css
/* Override Kendo UI Theme variables */
:root {
/* with Tailwind variables */
--kendo-color-secondary: var(--color-red-600);
/* with custom variable */
--kendo-color-info: var(--custom-tw-info);
/* with specific value */
--kendo-color-success: #61dbfb;
}
/* Customize KendoReact component styles */
.k-card.header-card {
border: 1px solid var(--custom-tw-blue);
}
.action-button {
--kendo-color-primary: var(--custom-tw-red);
}