Turborepo Tailwind preflight resetting styles
Unanswered
Arboreal ant posted this in #help-forum
Arboreal antOP
Hi All,
I've been struggling with getting my shared component library styles working correctly. Another issue has just popped up which means my previous 'fixes' haven't worked 😢
I'm have a turborepo monorepo with a nextjs app and a 'ui-lib' package. Both the ui-lib and next apps use tailwind for styling. The ui-lib contains some shadcn/ui components, as well as some custom components.
I started the project using the turborepo --with-tailwind template to see the rough project structure I still have. https://github.com/vercel/turbo/tree/main/examples/with-tailwind
My problem is that the styles and css resets seem to be loading in a funny order, and the resets are overwriting some of the specific classes.
My ui-lib has a prefix of 'ui-' on all the classes, however do note the preflight css resets don't have a prefix on them.
I have a button component which by default has a bg-primary and a hover:bg-primary/90. It was working fine, but today I noticed that it's now completely transparent when not hovered.
When running in dev mode - Refreshing the page the button shows correctly for a moment, and then some further compilation/loading occurs and the button becomes completely transparent.
When running in start mode after building the button is permanently transparent.
Does anyone have any tips for how to resolve this issue please? Or any tips for how to debug exactly what's going on?
I've been struggling with getting my shared component library styles working correctly. Another issue has just popped up which means my previous 'fixes' haven't worked 😢
I'm have a turborepo monorepo with a nextjs app and a 'ui-lib' package. Both the ui-lib and next apps use tailwind for styling. The ui-lib contains some shadcn/ui components, as well as some custom components.
I started the project using the turborepo --with-tailwind template to see the rough project structure I still have. https://github.com/vercel/turbo/tree/main/examples/with-tailwind
My problem is that the styles and css resets seem to be loading in a funny order, and the resets are overwriting some of the specific classes.
My ui-lib has a prefix of 'ui-' on all the classes, however do note the preflight css resets don't have a prefix on them.
I have a button component which by default has a bg-primary and a hover:bg-primary/90. It was working fine, but today I noticed that it's now completely transparent when not hovered.
When running in dev mode - Refreshing the page the button shows correctly for a moment, and then some further compilation/loading occurs and the button becomes completely transparent.
When running in start mode after building the button is permanently transparent.
Does anyone have any tips for how to resolve this issue please? Or any tips for how to debug exactly what's going on?
8 Replies
Arboreal antOP
Example of without and with hover, and a screenshot of the styles that are applied.
If I uncheck that
If I uncheck that
background-color: transparent it works as expected.the style that should be applied
It looks like the line number for the correct style is much higher than the line number for the reset style. Is there a way to force the resets to be at the top of the layout.css file? Perhaps via some form of config or webpack tweak?
It looks like there's a discussion around this topic https://github.com/vercel/next.js/issues/16630
I'll keep reading through and trying different things, but given this turbo template is an official one I was hoping someone else has had this issue and knows of an easy fix.
I'll keep reading through and trying different things, but given this turbo template is an official one I was hoping someone else has had this issue and knows of an easy fix.
Arboreal antOP
Really really really not ideal, but for now I've managed to get it working correctly by removing the prefix from both the config and the components in the ui-lib, importing the ts files from the ui-lib (rather than the compiled js files in the dist folder), not importing the style sheet from the ui-lib, and adding the path to the ui-lib src in the tailwind config for the main app so the styles get built.
This means that it's only the main app tailwind config that applies to the components/styles, and that there isn't any conflicts.
It's an ugly fix, but hopefully now there's no need to merge or handle conflicting styles, as they are all using a single set of styles. I tried playing around with importing the styles in different ways, and played around with layers, but didn't have any luck. Hopefully the vercel team manage to implement a proper fix at some point.
This means that it's only the main app tailwind config that applies to the components/styles, and that there isn't any conflicts.
It's an ugly fix, but hopefully now there's no need to merge or handle conflicting styles, as they are all using a single set of styles. I tried playing around with importing the styles in different ways, and played around with layers, but didn't have any luck. Hopefully the vercel team manage to implement a proper fix at some point.