Create your project

npx create-next-app my-project
cd my-project

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Start your build process

npm run dev

Hello World

function Index() {
  return (
    <div className="flex">
      <h1 className="text-3xl font-bold text-center p-8 rounded-xl text-white bg-blue-900 inline mx-auto mt-16">
        Hello world!
      </h1>
    </div>
  )
}

export default Index

Finished

Reference : tailwindcss.com/docs/guides/nextjs