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

[Omar]

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!

[Yanko]

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:

• https://www.telerik.com/kendo-react-ui/components/styling/tailwind-integration

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

[Omar]

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]

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`:

• https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-flag 

If additional inquiries arise, please let me know.

[Omar]

Oh, thank you so much! I'll try that.