0
621
ViewsSome Tailwind styles not working in production with Next.js
For some reason a few styles don't seem to be working in production build hosted on Netlify. This seems to only be happening on a single component. It's a wrapper located at ./layout/FormLayout.tsx (don't know if that changes anything). Here is the wrapper:
const FormLayout: React.FC<FormLayout> = ({ children, title, description }) => {
return (
<div className="w-screen mt-32 flex flex-col items-center justify-center">
<div className="p-6 flex flex-col items-center justify-center">
<h2 className="text-4xl font-semibold text-blue-400">
{title}
</h2>
{description && (
<h6 className="mt-4 text-md font-medium">{description}</h6>
)}
<div className="mt-12 w-max">{children}</div>
</div>
</div>
)
}
and it's used here:
const Register: React.FC<RegisterProps> = () => {
return (
<FormLayout title="Register" description="Register with your email.">
{/* form stuff. styles do work in here */}
</FormLayout>
)
}
Here are some of the config files:
tailwind config:
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
postcss config:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Here is a graphical example of what is happening:
For my build command, I use next build && next export, and Netlify deploys the /out directory.
All the code is here via github
7 answers
Answer question0
For anyone seeing this in the future, just add the path to any new folder in the purge array into the tailwind config like this:
module.exports = {
purge: [
"./src/**/*.{js,ts,jsx,tsx}",
// Add more here
],
darkMode: 'class',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
December 2021 Update:
After TailwindCSS v.3, the config file is slightly different. The above configuration would be:
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
// Add extra paths here
],
theme: {
extend: {},
},
plugins: [],
}
0
in my case this was happening because i wasnt giving the right address in purge in tailwind.config.css
0
I had the same issue.
I changed these :
purge: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
to these :
purge: ["./pages/**/*.js", "./components/**/*.js"],
and that's it. problem solved! weird issue
0
In case anyone is having issues with not updating dom changes accordingly. Check if imports and filenames are written with the same case!
Header.js != header.js
0
This happened to me sporadically and I eventually found that if the only change I made to my site since the last deploy was to responsive attributes, e.g. changing md:w-1/4 to sm:w-1/4 then the deployed site would be missing the class corresponding to sm:w-1/4. Adding any new path (even a fictitious one) to the purge: [... array and redeploying solved the problem.
0
I'm experiencing a similar situation but have not been able to make it work, I've gone over all the above recommendations but I'm still missing something (probably really obvious).
The result is the same, the tailwind tags won't work on the browser, no errors shown, it simply doesn't work (need to clarify that I'm a newbie in Tailwindcss, only testing it for the first time but after days can't make it work, so please be gentle if you find something really silly ;)
These are my files in case someone can take a look or point in a direction of how to debug it I'll be deeply grateful:
styles.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js:
module.exports = {
content: [
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
// Add extra paths here
],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/public/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline text-red-700">
Hello from Tailwind 3 CsSS
</h1>
<p class = "text-9xl"> testing cds
<div class="container">
<h2 class="text-3xl font-bold underline">
Lorem8 ipsum dolor sit amet consectetur adipisicing elit.
Provident repudiandae fuga asperiores autem necessitatibus
similique enim placeat ipsa accusamus molestiae.
</h2>
</div>
</body>
</html>
0
In my case, it was a directory not being listed in the content property of tailwind.config.js file. so any component residing in that directory was not being checked by tailwind.
My new component was in a folder called providers, and it was not listed in content.
so after changing content list to:
content: [
// ...
"./components/**/*.{js,ts,jsx,tsx}",
"./providers/**/*.{js,ts,jsx,tsx}", // the key was this line
]
The providers directory was also being checked by tailwind.
So any directory which consists of a component that uses tailwind utility classes must be included in this list.