Styles don't load in production, works in dev. Using Next.js with MDX

[deadcoder0904]

I probably cobbled together this from a bunch of blog posts online. Some blogs use autoprefixer, some use postcss-preset-env & it's all confusion.

I have installed tailwindcss as a dev dependency & imported the styles properly in pages/_app.tsx. Here are my relevant files:

package.json

"dependencies": {
	"@mapbox/rehype-prism": "^0.5.0",
	"@mdx-js/react": "^1.6.19",
	"@types/nprogress": "^0.2.0",
	"fast-glob": "^3.2.4",
	"next": "10.0.0",
	"nprogress": "^0.2.0",
	"react": "^17.0.1",
	"react-dom": "^17.0.1",
	"tinytime": "^0.2.6"
},
"devDependencies": {
	"@fullhuman/postcss-purgecss": "^3.0.0",
	"@mdx-js/loader": "^1.6.19",
	"@next/bundle-analyzer": "^10.0.0",
	"@types/mdx-js__react": "^1.5.3",
	"@types/node": "^14.14.6",
	"@types/react": "^16.9.55",
	"@types/react-dom": "^16.9.9",
	"@types/webpack-env": "^1.15.3",
	"cross-env": "^7.0.2",
	"feed": "^4.2.1",
	"file-loader": "^6.2.0",
	"postcss-flexbugs-fixes": "^4.2.1",
	"postcss-preset-env": "^6.7.0",
	"rimraf": "^3.0.2",
	"simple-functional-loader": "^1.2.1",
	"tailwindcss": "^1.9.6",
	"typescript": "4.0.5"
},

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
	future: {
		removeDeprecatedGapUtilities: true,
		purgeLayersByDefault: true,
	},
	purge: {
		mode: 'all',
		content: ['./src/**/*.{js,ts,jsx,tsx}', './next.config.js'],
		options: {
			extractors: [
				{
					extensions: ['mdx'],
					extractor: (content) => {
						content = mdx.sync(content)

						// Capture as liberally as possible, including things like `h-(screen-1.5)`
						const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

						// Capture classes within other delimiters like .block(class="w-1/2") in Pug
						const innerMatches =
							content.match(/[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g) || []

						return broadMatches.concat(innerMatches)
					},
				},
			],
		},
	},
	theme: {
		extend: {
			colors: {
				'accent-1': '#333',
			},
			fontFamily: {
				sans: ['Inter var', ...defaultTheme.fontFamily.sans],
			},
		},
	},
	variants: {},
	plugins: [
		function ({ addBase, addComponents, theme }) {
			addBase([
				{
					'@font-face': {
						fontFamily: 'Inter var',
						fontWeight: '100 900',
						fontStyle: 'normal',
						fontNamedInstance: 'Regular',
						fontDisplay: 'swap',
						src: 'url("/fonts/Inter-roman.var-latin.woff2?3.13") format("woff2")',
					},
				},
				{
					'@font-face': {
						fontFamily: 'Inter var',
						fontWeight: '100 900',
						fontStyle: 'italic',
						fontNamedInstance: 'Italic',
						fontDisplay: 'swap',
						src: 'url("/fonts/Inter-italic.var-latin.woff2?3.13") format("woff2")',
					},
				},
			])
		},
	],
}

postcss.config.js

module.exports = {
	plugins: [
		'tailwindcss',
		'postcss-flexbugs-fixes',
		process.env.NODE_ENV === 'production'
			? [
					'@fullhuman/postcss-purgecss',
					{
						content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
						defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
					},
			  ]
			: undefined,
		[
			'postcss-preset-env',
			{
				autoprefixer: {
					flexbox: 'no-2009',
				},
				stage: 3,
				features: {
					'custom-properties': false,
				},
			},
		],
	],
}

I am sure I'm doing something wrong but don't know what?

[deadcoder0904]

I changed the line in postcss.config.js to:

content: ['./src/**/*.{js,jsx,ts,tsx}']

and it's working but just not loading the right font sadly :(

[deadcoder0904]

I removed the entire thing below from postcss.config.js & now it works fine:

process.env.NODE_ENV === 'production'
			? [
					'@fullhuman/postcss-purgecss',
					{
						content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
						defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
					},
			  ]
			: undefined,

[simonswiss]

Yep - you want to relay the configuration of Purge CSS over to your Tailwind config file - so removing it from the PostCSS config was the right move! 👍

[deadcoder0904]

That makes sense