CSS
Next.js has built-in support for styled-jsx(CSS in JS lib)
Can also import .css and .scss files
Tailwind
https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
yarn add tailwindcss postcss-preset-env postcss-flexbugs-fixes
npx tailwind init tailwind.config.js --full
postcss.config.js
module.exports = {
plugins: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3,
features: {
'custom-properties': false
}
}
]
]
}
tailwind.config.js
module.exports = {
purge: [
'./components/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}'
],
//...
}
styles/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Last updated