Tailwind Not Working in Production Mode with Next.js Build #8521
Replies: 12 comments 21 replies
-
The class from material ui comes after your no-underline in production the tailwind class has no effect. I don't know why this is happening but it is a material ui problem not a tailwind problem. |
Beta Was this translation helpful? Give feedback.
-
I started a new project from scratch with no material-ui and only tailwindcss, and I see the same issue as before. When I deploy my code or a run production build locally, the styling breaks down. Look at the screenshots, in development the highlighted The primary issue is that it's impossible to style a page if it's going to look different once it's up and running. Does anyone know what's going on here or how to address this?
|
Beta Was this translation helpful? Give feedback.
-
I have a similar problem with Any ideas how to fix this? |
Beta Was this translation helpful? Give feedback.
-
Hi guys! I tried many things to try fixing the issue, I guess I was missing some configuration in my project, ended up using the configuration of riipandi, and migrating everything to the template, after deploying everything was working. |
Beta Was this translation helpful? Give feedback.
-
I added important to be true in the tailwind configuration file module.exports = {
important: true,
....
} when I inspected the elements I found out some top-level CSS is overriding tailwindcss |
Beta Was this translation helpful? Give feedback.
-
I had issue where height class of tailwind working fine in dev env but in production it wasn't working. Fix.. Open tailwind.config.js Inside module.export add all folders that contain tailwind classe like this
I created layout folder and added some layout here with tailwind css. But this wasn't added in config file thats why i was having this issue . Issue fixed after adding layout folder in config files. Note |
Beta Was this translation helpful? Give feedback.
-
hi guys i had the same problem with some tailwind styles not applying in production. i think i solved it for now.
|
Beta Was this translation helpful? Give feedback.
-
Hey everybody Just Prod tailwindcss official you first need to build a CSS file put it in the styles folder and then import it instead of globals.css after this there will be no issue actually, this happens because tailwindcss build command is not being run there on the hosting platform as it's not specified in the packages.json file I hope it helps if yes then please follow for more such tips and help |
Beta Was this translation helpful? Give feedback.
-
I might be late but here is how to get it working After configuration is completed using this tutorial . https://tailwindcss.com/docs/guides/nextjs go to your package.json "scripts": { build should be like this . this will create build.css if you run "npm run build" command use that build.css file in App/layout.tsx like this import "../build.css" then it should work, dont worry about configuration much. First tutorial link is enough. |
Beta Was this translation helpful? Give feedback.
-
If your Tailwind classes work in development but not in production for a Next.js project, the issue usually lies in Tailwind’s purge settings or how the production build is handling CSS. Here are some steps to troubleshoot and resolve this issue: 1. Check Content Paths in
|
Beta Was this translation helpful? Give feedback.
-
This fixed the issue for me... I had Before:
next/app/layout.tsx
After:
next/app/layout.tsx
|
Beta Was this translation helpful? Give feedback.
-
In my case, I followed this https://nextjs.org/docs/pages/api-reference/config/next-config-js/output After running npm build, run cp -r .next/static .next/standalone/.next/ to copy static assets to the standalone server. Your build command should look like this.
|
Beta Was this translation helpful? Give feedback.
-
The following tailwind className assignment works correctly when running the server in development mode only, but DOES NOT work in production:
<Link href='#pop' className='w-full text-black no-underline'>
Specifically, the class
no-underline
becomes:text-decoration-line: none;
as shown by the Chrome dev tools. But when I run the following from the command likeNODE_ENV=production npm run build && npm start
now the same element hastext-decoration: underline;
where it wastext-decoration-line: none;
before when running the dev server build.This results in a UI bug where the anchor tag is no longer rendering correctly, as it did in development.
I followed the tailwind installation docs but it's not working as expected: https://tailwindcss.com/docs/guides/nextjs
Digging around has led me to a number of posts and articles talking about
purge
I've experimented with a number of different configurations, mostlycontent
/purge
intailwind.config.js
but I haven't been able to improve the situation. Though I have been able to make the situation worse, ie break the UI even more by changing the entries in thecontent
array intailwind.config.js
MY CODE
Full codebase: https://github.com/currenthandle/tunester/blob/no-moralis/components/IndexPageSideBar.js#L18
There are several other tailwind className assignments that are not working correctly. For this reason, when I deploy my app to Vercel, in this case, the UI is totally broken: https://tunester-8f737wgsk-currenthandle.vercel.app/
Beta Was this translation helpful? Give feedback.
All reactions