Install Tailwind CSS In NextJS

Go through this :

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

Update [TODO: Code shorthand span ] with :

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

Setup [TODO: Code shorthand span ] with just this :

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 :

netlify dev