NextJS 13 Nextui/Tailwind Styles Not Applying in Browser
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
Issue Summary:
I'm working with a Next.js app that uses NextUI & Tailwind CSS. In my local development environment using Docker, NextUI and Tailwind styles aren’t being applied correctly.
I’ve narrowed the issue down to the fact that the CSS file generated under .next/static/css/ is correct, but something goes wrong between that generation and the browser fetching the file via _next/static/css/app/layout.css?v=<hash>. In the browser, the correct CSS file isn't being applied, leading to styling issues.
What I’ve Tried:
1. Confirmed the correct .next/static/css file is generated. I compared the generated file from production and local, and they appear identical.
2. Checked for caching issues. Cleared browser cache and tried in incognito mode to ensure it’s not a caching issue.
3. Verified CSS file path and serving. Inspected the network request for the CSS file, and I noticed that the path transformation from .next/static/css to _next/static/css/app/layout.css is happening, but the output file is somehow flawed. When I manually paste the file at .next/static/css into the browser, the styles work.
4. I have no custom webpack configs in my next.config.js file.
5. Verified the tailwind.config.js and NextUI setup is correct.
6. Rebuilt the development environment.
Cleared the .next folder and restarted the development server, but the issue persists.
Request:
I’m looking for insights into why the CSS transformation between the .next/static/css generation and the _next/static/css/app/layout.css file being served is making it so the styles are not applied. Could this be a Webpack issue or something related to asset serving in development?
Thank you!
I'm working with a Next.js app that uses NextUI & Tailwind CSS. In my local development environment using Docker, NextUI and Tailwind styles aren’t being applied correctly.
I’ve narrowed the issue down to the fact that the CSS file generated under .next/static/css/ is correct, but something goes wrong between that generation and the browser fetching the file via _next/static/css/app/layout.css?v=<hash>. In the browser, the correct CSS file isn't being applied, leading to styling issues.
What I’ve Tried:
1. Confirmed the correct .next/static/css file is generated. I compared the generated file from production and local, and they appear identical.
2. Checked for caching issues. Cleared browser cache and tried in incognito mode to ensure it’s not a caching issue.
3. Verified CSS file path and serving. Inspected the network request for the CSS file, and I noticed that the path transformation from .next/static/css to _next/static/css/app/layout.css is happening, but the output file is somehow flawed. When I manually paste the file at .next/static/css into the browser, the styles work.
4. I have no custom webpack configs in my next.config.js file.
5. Verified the tailwind.config.js and NextUI setup is correct.
6. Rebuilt the development environment.
Cleared the .next folder and restarted the development server, but the issue persists.
Request:
I’m looking for insights into why the CSS transformation between the .next/static/css generation and the _next/static/css/app/layout.css file being served is making it so the styles are not applied. Could this be a Webpack issue or something related to asset serving in development?
Thank you!
10 Replies
American Chinchilla
When you say theyre not being applied correctly
Do you mean tailwind css is not working at all- no classnames work?
Transvaal lionOP
I'm able to apply tailwind styles, but I cannot apply nextui component styles.
but i'm not really using tailwind directly in the app.
Transvaal lionOP
so when I try to make a nextui <Button color="primary">Button</Button> it ends up looking like:
the top of the layout.css?v=xxx file looks kind of funky:
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./app/globals.css ***!
\*************************************************************************************************************************************************************************************************************************************************************/
/*
! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/@American Chinchilla Do you mean tailwind css is not working at all- no classnames work?
Transvaal lionOP
I'm wondering if this is a local issue only? It's confusing to me how the .next/static/css gets transformed into what the browser gets from the app
@Transvaal lion so when I try to make a nextui <Button color="primary">Button</Button> it ends up looking like:
go into console and hover over the button
and send a screenshot of the applied styles
Transvaal lionOP
I'm sorry my issue is complete inscrutable to me. The issue went away despite me doing nothing but reinstalling packages.