Next.js project integrated with tailwindcss setup

Create a new Next.js project

npx create-next-app my-project

Tailwindcss installation and configuration

npm install tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

then change the purge option in tainwind.config.js

module.exports = {
    // purge: [], annotate this line
    mode: 'jit', // add `mode` option
    purge: ['./pages/**/*.js', './components/**/*.js'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Import Tailwind in your own CSS

delete Home.module.css in local folderstyle , add configure globals.css with following new contents.

/* ./styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Attention: Since you’ve deleted Home.module.css , you should also delete the line import styles from '../styles/Home.module.css' in folder pages/index.js (also other code related to styles )

Now open terminal and run command and that’s all done

yarn run dev