How to add tailwind style to a button?

[zfusx]

Describe the bug Add the tailwind style to button , no effect on that button

rx.button("Click me", class_name="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded")

in Chrome we can see the button style is: <button type="button" class="chakra-button bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded css-wqpdoh">Click me</button>

if we remove the css-wqpdoh from the class,

the button is tailwind styled:

what's the problem with the button component?

where does the css-wqpdoh and chakra-button class comes from? any idea to block it, It's easy to get pure tailwind class from designer, otherwise it would be headache to convert tailwind css to other style ,huge repeat work!

Specifics (please complete the following information):

• Python Version: 3.10
• Reflex Version: reflex==0.3.7
• OS: Mac OS
• Browser (Optional): Chrome

[cllatser]

Hello, there is an issue with Chakra and Tailwind components, they don't play well together. Reflex is switching Chakra components to Radix components. My advice if you want to style with Tailwind is to use native HTML tags. In your case, it would be rx.el.button(). Best regards.

[zfusx]

rx.el.button()

you are the Man !

[cllatser]

If you feel comfortable with the html tags. You can do from reflex import el and this, it is not necessary to put rx. in front of. So it would be el.button(), el.div(), el.input() 😀

[Lymah123]

Hi @zfusx has anyone started working on the issue?

[zfusx]

Hi @zfusx has anyone started working on the issue?

I don't know we just put into testing, normally designer will give figma with css in tailwind, if we can do all in python, that will be really great, nobody like js and its framework 's Spaghetti code

[Alek99]

Yes I would also advise using the components soon our core components will be able to support tailwind but probably won't be ready for a couple weeks