After developing an app for production, I encountered a problem with tailwindcss, postcss, and autoprefixer. While everything worked smoothly during development, once deployed to production, tailwindcss stopped functioning. I attempted to troubleshoot by reinstalling the packages and adjusting paths in the tailwind.config.css file, but nothing seemed to work. I'm at a loss as to what could be causing the issue. Below are my configuration files for tailwindcss and postcss:
Hosting platform: Heroku
tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
postcss.config.js
module.exports = {
plugins: {
tailwindcss: { config: "./tailwind.config.js" },
autoprefixer: {},
},
};
Global Styles
@tailwind base;
@tailwind components;
@tailwind utilities;