Despite following the proper build process with npm run build + npm run start, my Tailwind styling is not functioning correctly in the production build.
Oddly enough, when I use npm run dev, the styling works as expected and my page displays with a purple button:
https://i.sstatic.net/dPneN.png
However, after running npm run start following the build, my page appears differently:
https://i.sstatic.net/tR3JJ.png
Provided below is the structure of my folder:
https://i.sstatic.net/bvckW.png
The content of my tailwind.config.js file is as follows:
/** @type {import('tailwindcss').Config} */
/* eslint-env node */
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
fontFamily: {
sans: ['Roboto', 'sans-serif'],
},
},
plugins: [],
}
Here is what my postcss.config.js looks like:
/* eslint-env node */
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Within my global.css file, I have included the necessary Tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
Even though I have added tailwindcss as both a dependency and a devDepenency, the issue persists. Any insights on how to resolve this for production builds would be greatly appreciated.