reflex-dev / reflex

🕸️ Web apps in pure Python 🐍

Home Page:https://reflex.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[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.

image

Then set tailwind=None in rxconfig.py and it becomes horrible

image

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