After reading various blog posts online, I put together this code snippet. The confusion arises from blogs using autoprefixer while others use postcss-preset-env.
In my setup, I have added tailwindcss as a development dependency and properly imported the styles in pages/_app.tsx. Here are the relevant files:
package.json
"dependencies": {
"@mapbox/rehype-prism": "^0.5.0",
"@mdx-js/react": "^1.6.19",
"@types/nprogress": "^0.2.0",
...
},
...
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: {
...
},
theme: {
extend: {
colors: {
'accent-1': '#333',
},
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {},
plugins: [
function ({ addBase, addComponents, theme }) {
...
},
],
}
postcss.config.js
module.exports = {
plugins: [
'tailwindcss',
'postcss-flexbugs-fixes',
process.env.NODE_ENV === 'production'
? [
'@fullhuman/postcss-purgecss',
...
]
: undefined,
...
],
}
Despite following what seems to be the correct steps, I am encountering errors. Can someone point out where I might be going wrong?