Styles are just buggy.

[devlzcode]

This is just one instance of the issue with styling I've been experiencing with radix-ui themes. I'd love to continue using this library but at this point I've spent more time trying to debug or get consistency in styling cause of problems when I could be getting my product ready.

next 13.5.4
radix-themes 2.0.0

Styles just don't apply sometimes, especially on buttons (I've seen it happen with inputs too). These buttons should both be the accent color, but they are not:

export function LoginModal({ isOpen, onClose }) {
  return (
    <Dialog.Root open={isOpen}>
      <Dialog.Content className="max-w-md">
        <Dialog.Title>Login</Dialog.Title>
        <Dialog.Description className="mb-4">
          Please enter your account name and password.
        </Dialog.Description>
        <form className="space-y-4">
          <label htmlFor="account_name">
            <span className="mb-1">Account Name</span>
            <TextField.Root>
              <TextField.Input id="account_name" />
            </TextField.Root>
          </label>
          <div className="space-x-2">
            <Dialog.Close>
              <Button>Cancel</Button>
            </Dialog.Close>
            <Dialog.Close>
              <Button>Submit</Button>
            </Dialog.Close>
          </div>
        </form>
      </Dialog.Content>
    </Dialog.Root>
  );
}

Here is the same issue but using the code from the dialog documention of radix themes:

[vladmoroz]

Looks like Tailwind base overwrites Radix Themes classes in your case.

See #109 (comment) for the solution.

If you use Tailwind just for its layout utilities, I'd recommend to give Radix Themes layout components a try instead.

[devlzcode]

Looks like Tailwind base overwrites Radix Themes classes in your case.

See #109 (comment) for the solution.

If you use Tailwind just for its layout utilities, I'd recommend to give Radix Themes layout components a try instead.

That works, thanks.