How to QUICKLY Install Tailwind CSS in Next.js Project

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:

YouTube, Twitch, Twitter, Discord