I often create new projects and TailwindCSS is needed each time. Sometimes the documentation doesn’t cut it, so thought I’d document the steps for how to quickly install TailwindCSS in a Next.js project. That way, next time I make a new project, I won’t even need to think about how to install this package, I can just reference this.
Here is the video version of this tutorial if you prefer that.
Simple Algorithm
1: Run this command to install needed packages: yarn add tailwindcss postcss autoprefixer
2: Create a src folder at the root directory. Move the pages and styles folders into the src folder.
3: Create file called postcss.config.js at the root and paste this inside:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}4: Create file called tailwind.config.js at the root and paste this inside:
module.exports = {
content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
}5: Inside the _app.js file paste this: import 'tailwindcss/tailwind.css'
and…BAM, that’s it.
If you have any questions, feel free to ask here or on Discord.
Follow my social media to keep up-to-date:
