Switch between multiple themes while using KendoReact + Tailwind v4 + Vite 7

1 Answer 10 Views
Accessibility Styling Styling / Themes
Omar
Top achievements
Rank 1
Omar asked on 04 Jul 2025, 04:09 AM

I'm using latest v11 KendoReact packages and Tailwind v4 and Vite 7.

I saw this example 

Github (forked) - StackBlitz

And even though it does switch between themes, but I'm unable to get it to work with Tailwind. Seems like Kendo classes overwrite Tailwind's.

Also, Tailwind v4 docs states that we only put this in our .css file

@import "tailwindcss";

How do I get it to work in a way that if I do this

        <Button
          className="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white shadow hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
        >
          Next Theme
        </Button>
        <Button themeColor={"primary"}>Primary</Button>
        <Button disabled={true}>Disabled</Button>

The first button will have the Tailwind styling but the 2nd two will have the default Kendo styling?

Thanks!

1 Answer, 1 is accepted

Sort by
0
Yanko
Telerik team
answered on 07 Jul 2025, 12:22 PM

Hi, Omar,

The KendoReact Button component does accept a `className` prop, and you can pass Tailwind classes to it. However, the KendoReact Button applies its own CSS classes and styles, which often override or conflict with Tailwind utility classes. This is why your custom Tailwind styles may not appear as expected.

The KendoReact components do not natively utilize TailwindCSS utility classes in their markup, and you cannot style them directly using TailwindCSS class names, as the Kendo UI theme styles will take precedence. The suggested approach for customizing their visual appearance of the components is by overriding the corresponding Kendo UI theme variables with default TailwindCSS variables or with your own custom variables. 

For example, you can override the `--kendo-color-secondary` variable and set it `--color-blue-600`, this way instead of applying `className="bg-blue-600"` you can set `themeColor="secondary"`

:root { --kendo-color-secondary: var(--color-blue-600);
... } <Button themeColor="secondary" > //instead of <Button className="bg-blue-600 ..." >

For more information on integrating Tailwind with KendoReact, refer to the article from our documentation website:

I hope this helps, and please do not hesitate to ask if more questions arise or if I can further assist you.

Regards,
Yanko
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Omar
Top achievements
Rank 1
commented on 07 Jul 2025, 03:46 PM

Yes, I was aware of overwriting the colors. Thanks for confirming that Tailwind's utility classes won't work with Kendo. Are there any plans to get both of them to work together? For example, if TW classes are passed, they'd take a higher precedence? 
Yanko
Telerik team
commented on 08 Jul 2025, 09:50 AM

Hi, Omar,

The Kendo UI Theme styles have a higher specificity than regular TailwindCSS classes. In order for the Tailwind classes to take precedence over the Kendo UI theme styles you will need to increase their specificity. The suggested approach in such scenarios as per the official Tailwind documentation is to use the important flag when importing Tailwind to mark all utilities as `!important`:

If additional inquiries arise, please let me know.

Omar
Top achievements
Rank 1
commented on 08 Jul 2025, 03:00 PM

Oh, thank you so much! I'll try that.
Tags
Accessibility Styling Styling / Themes
Asked by
Omar
Top achievements
Rank 1
Answers by
Yanko
Telerik team
Share this question
or