Using Tailwind in GlobalError... possible?
Unanswered
Munchkin posted this in #help-forum
MunchkinOP
I'm adding a global-error.tsx to my project to handle errors thrown in layout.tsx (e.g. if there's problem fetching metadata). I'm using Tailwind to style the app, and I'd like to use the Tailwind classes in the GlobalError component. This would make it much easier to match the rest of the branding & design.
The problem is the Tailwind classes don't seem to have any effect. I can see the compiled Tailwind CSS in the "sources" in the browser dev tools so at least some bit of Tailwind is coming over the wire, but the GlobalError component renders as unstyled html.
If I'm unable to use Tailwind, I have to recreate the styles using React's
Relevant NextJS docs: https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-errors-in-root-layouts
The problem is the Tailwind classes don't seem to have any effect. I can see the compiled Tailwind CSS in the "sources" in the browser dev tools so at least some bit of Tailwind is coming over the wire, but the GlobalError component renders as unstyled html.
If I'm unable to use Tailwind, I have to recreate the styles using React's
style
prop, which "works" but adds a source of truth -- not great for maintenance. Relevant NextJS docs: https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-errors-in-root-layouts
2 Replies
MunchkinOP
I tried that, but it's not working for me.
Perhaps relevant info: everything in my app is a dynamic route. So my global error file is here:
Perhaps relevant info: everything in my app is a dynamic route. So my global error file is here:
src/app/[thing]/global-error.tsx
. When I put global-error.tsx in app/
, it had no effect -- I just saw the default NextJS error page.