Next.js Discord

Discord Forum

Using Tailwind in GlobalError... possible?

Unanswered
Munchkin posted this in #help-forum
Open in Discord
Avatar
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 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

Avatar
joulev
import the global css file into the global-error.tsx file as well
Avatar
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: 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.