Install Tailwind Css In Nextjs

December - 2021

Go through this:

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

Update tailwind.config.js with:

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

Setup styles/global.css with just this:

@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