Next.js tailwindcss styles are lost in production mode
Issue
When first building a Next.Js 11 application in production mode, all the styling related to tailwindcss was lost.
Solution
The purge property in my tailwind.config.js configuration file looked like this:
1 2 3
module.exports = { purge: [join(__dirname, 'pages/**/*.{js,ts,jsx,tsx}')], };
The official tailwindcss documentation explicitly states the following on the purge array:
this list should include any files in your project that reference any of your styles by name.
I extracted plenty of components from my pages into the components folder and they should also be added to the purge array like this:
1 2 3
module.exports = { purge: [join(__dirname, 'pages/**/*.{js,ts,jsx,tsx}'), join(__dirname, 'components/**/*.{js,ts,jsx,tsx}')], };