How do I use my CSS classes and tailwind in RadixUi?

[mtalha218]

I am having some issues of using tailwindcss and CSS classes in RadixUI,

<Button className="rounded-none text3">Upload Documents</Button>

Now neither my CSS class text3 is applied, nor did tailwindCss class is applied. Why is that? Am i implementing it wrong?

[vladmoroz]

Please post a reproduction on CodeSandbox that we could look at.

Although, overall I wouldn't recommend to customize the components this way instead of using the provided props, as the code will get unmaintainable and the design incoherent quite fast.

You can use size and radius prop instead:

<Button size="3" radius="none">Upload Documents</Button>

[mtalha218]

So customizing RadixUi components is quiet difficult, suppose if the requirement is very different from the original component.

[vladmoroz]

Technically most components work with Tailwind if your setup is right, it’s just my recommendation when it comes to using the Radix Themes to get the best experience out of it.

[mtalha218]

Also not even my css class not working

<Button className="text3">Upload Documents</Button>

There must be an explanation to that.

[mtalha218]

I have figured something out, i am unable to use className as it is not being override on radixUi styles. This works for me.

<TextField.Input className="[&&]:h-[57px] [&]:rounded-[8px] text3 [&&]:border-1 [&&]:border-solid [&&]:border-[#FFFFFF] " placeholder="Enter your email" />

But i have to add "[&&]:" to make that class a priority, can i fix that so that i dont have to use "[&&]:" every time and className should override the radixUi styles?

[vladmoroz]

See #109 (comment) for conflict-free setup with Tailwind