wasp
wasp copied to clipboard
Using AuthUI + Tailwind results in broken CSS
[!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.
Broken design on main branch |
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)
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 theSubmitButton
I could only reproduce this with wasp start
. It doesn't happen when I build the app and host static files