Next.js Discord

Discord Forum

Tailwind styling not loading on not-found.tsx page.

Unanswered
West African Crocodile posted this in #help-forum
Open in Discord
West African CrocodileOP
I feel like im missing some part of the setup but can't for the life of me find anything about this issue.

The defined styles also don't show up in the element inspector, as in the classnames carry no defintion.

Everywhere else, it works fine.

Anyone got any tips?

I've tried importing the globals.css file in the page itself too.

23 Replies

West African CrocodileOP
trying to see if i can replicate it in a clean project
Unfortunately it works in a clean project :/
joulev
You can start removing chunks of your code in the problematic project until the bug disappears
Then you will now the cause of the bug and include it in the repro
West African CrocodileOP
Wouldn't know where to start lol, its a pretty big project and we just waited till (too late) now to add route based error handling :,)
joulev
Well I need a repro to see what’s wrong…
Start by removing unrelated routes ig
Remove every routes except /
Remove all db stuff
Remove all components
Do them one by one
Balinese
@West African Crocodile does it only happen on this certain page?
i have a similar problem, but on all pages that isnt /
my project is as nearly blank as you can get
when i go to anything thats not /, my css/app is not in the source, as you can see. I see it says development, but i dont know why it would just remove my CSS even in development
(both pages have the same 1 component, which obviously has the styling)
  "dependencies": {
    "@types/node": "20.5.0",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "eslint": "8.47.0",
    "eslint-config-next": "13.4.15",
    "next": "13.4.13",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.1.6"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "postcss": "^8.4.28",
    "tailwindcss": "^3.3.3"
  }


dependencies
@Balinese <@591034126065467442> does it only happen on this certain page?
West African CrocodileOP
My issue was that it wasn't rendering the 404 page through the layout.tsx of the folder above it / same folder but instead renders it through the the layout directly in the ./app folder (using app router)
I didnt have a layout there as the layout I rendered the public part of the website through was in /[language]/(site)/layout.tsx