[REF-2566] rx.accordion is ugly as sin when `tailwind=None`
masenf opened this issue · comments
Describe the bug
If tailwind is disabled in the reflex app, the builtin accordion looks horrendous and unusable.
To Reproduce
from the docs
import reflex as rx
def index() -> rx.Component:
return rx.accordion.root(
rx.accordion.item(
header="First Item",
content="The first accordion item's content",
font_size="3em",
),
rx.accordion.item(
header="Second Item",
content="The second accordion item's content",
font_size="3em",
),
rx.accordion.item(
header="Third item",
content="The third accordion item's content",
font_size="3em",
),
width="300px",
)
app = rx.App()
app.add_page(index)
Expected behavior
Looks fine at first.
Then set tailwind=None
in rxconfig.py and it becomes horrible
Specifics (please complete the following information):
- Python Version: 3.12
- Reflex Version: 0.4.7
- OS: macOS 14
- Browser (Optional): chrome
Additional context
I think the accordion primitive needs to be updated to work with radix themes a bit better, similar to how rx.progress
was recently updated to make use of data-*
attributes instead of hardcoding colors from the theme into the style... although i'm not sure that would even fix this.
it seems like the accordion styles depend on the tailwind reset being in place, otherwise the button colors fallback to the default "buttonface" which is gross.
From SyncLinear.com | REF-2566