New to Kendo UI for Vue? Start a free 30-day trial
Customizing Components
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 Kendo UI for Vue Components with Tailwind CSS
Since Kendo UI for Vue 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
/* Custom variables */
--custom-tw-green: #42b883;
--custom-tw-lightgreen: #00884b;css
/* Override Kendo UI Theme variables */
:root {
--kendo-color-primary: var(--custom-tw-green);
--kendo-color-info: var(--custom-tw-lightgreen);
}
/* Customize kendo component styles */
.k-card.header-card {
border: var(--custom-tw-green) solid 1px;
}
.action-button {
--kendo-color-primary: var(--custom-tw-lightgreen);
}