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