Install Tailwind and its peer-dependencies using npm
:
# If you're on Next.js v10 or newer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# If you're on Next.js v9 or older
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Create tailwind.config.js
and postcss.config.js
in the root of the project.
tailwind.config.js
should be like:
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
postcss.config.js
should be like:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Click on the Dev Environment button and follow the readme file instruction to install TailwindCSS and it's dependencies in a live project.