Tailwind CSS - AdarshTheki/mern-stack-learn GitHub Wiki

Setup Vite and Tailwind

Tailwind Docs

  1. Setup vite project
npm create vite@latest my-project -- --template react
cd my-project
  1. Add tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  • Rename to tailwind.config.cjs, Auto following content
  • Add the Tailwind directives to your CSS

index.css

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

Useful Tailwind Extensions

Repeating Styles

index.css

@layer components {
  .align-element {
    @apply mx-auto max-w-7xl px-8;
  }
}

Global Styles

index.html

<html lang="en" class="bg-slate-50 scroll-smooth"></html>
⚠️ **GitHub.com Fallback** ⚠️