Open zfusx opened 9 months ago
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.
rx.el.button()
you are the Man !
If you feel comfortable with the html tags. You can do
from reflex import el
and this, it is not necessary to putrx.
in front of. So it would beel.button()
,el.div()
,el.input()
π
Hi @zfusx has anyone started working on the issue?
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
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
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
andchakra-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):