Install Tailwind CSS In NextJS

Go through this:

Code

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

Update `tailwind.config.js` with:

Code

content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],

Setup `styles/global.css` with just this:

Code

-- css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-gray-900;
    @apply text-gray-300;
    @apply pt-6;
    @apply max-w-prose;
    @apply mx-auto;
  }
  a {
    @apply text-blue-400;
  }
  h1 {
    @apply text-3xl;
    @apply font-bold;
  }
  h2 {
    @apply text-2xl;
    @apply font-bold;
  }
  h3 {
    @apply text-xl;
    @apply font-bold;
  }
}

restart:

Code

netlify dev