wasp icon indicating copy to clipboard operation
wasp copied to clipboard

Using AuthUI + Tailwind results in broken CSS

Open infomiho opened this issue 1 year ago • 1 comments

[!NOTE] Close #1565 and verify the problem persists before attempting this.

⚠️ Using Tailwind + out Auth UI results in the default button to be transparent since Tailwind bg color is loaded after but since it's at the same specificity, it overrides our Stitches defined bg color.

image
Broken design on main branch
image
Overridden background color for the button

Research

It seems that this is a regression that happened with changes related to restructuring. I believe we changed order of some imports which resulted in Tailwind CSS being loaded after our Stitches CSS (Related issue: https://github.com/tailwindlabs/tailwindcss/issues/8670)

image
Auth UI + Tailwind before restructuring

Possible fix

  • Change the way we style Auth UI
  • Reorder imports of the CSS that's loaded (seems fragile)
  • Hotfix it with !important on the all overridden properties e.g. backgroundColor for the SubmitButton

infomiho avatar Feb 14 '24 10:02 infomiho

I could only reproduce this with wasp start. It doesn't happen when I build the app and host static files

sodic avatar Feb 16 '24 20:02 sodic