TAILWIND CSS – BASIC

🎨 Tailwind CSS – Complete Core Notes

Utility-First CSS, Predefined Classes, Responsive Breakpoints, Flex/Grid Systems aur Modern Styling ka comprehensive reference guide.

1️⃣ Tailwind CSS Kya Hai?

Definition: Tailwind CSS ek modern, utility-first CSS framework hai jo pre-designed UI components (jaise Bootstrap ke buttons ya cards) dene ke bajay low-level utility classes (jaise flex, pt-4, text-center) provide karta hai.

Traditional CSS vs Tailwind CSS: Traditional CSS me alag se .css file likhni padti hai aur naming conventions (jaise BEM) maintain karni hoti hain. Tailwind me bina HTML document chode inline class attributes ke sahare direct production-grade design ban jata hai.

• Utility-First Workflow: Har ek class ek specific CSS property (margin, color, padding, flex) ko control karti hai.
• Zero Unused CSS (JIT Engine): Just-In-Time compiler build step ke dauran sirf wahi classes output file me include karta hai jo project me use hui hain (Final CSS size < 10KB).
• High Customization: tailwind.config.js ke zariye font, colors aur spacing ko enterprise branding ke mutabiq customise kiya ja sakta hai.

---

2️⃣ Tailwind Ke Core Features

• Responsive Modifiers: Breakpoint prefixes (sm:, md:, lg:, xl:) se bina media queries likhe design adaptive ban jata hai.
• Pseudo-Class Variants: Hover, focus, active aur disabled states direct class prefixes se handle hoti hain (e.g. hover:bg-blue-600).
• Dark Mode Support: dark: variant prefix ke zariye single click dark theme switch implement karna aasan hota hai.

---

3️⃣ Tailwind Installation & Setup

🔹 Option 1: CDN Setup (Quick Prototyping)

<!-- Direct include in HTML head -->
<script src="https://cdn.tailwindcss.com"></script>

🔹 Option 2: Production Setup (NPM & PostCSS)

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

Apni tailwind.config.js file me content paths set karein:

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

---

4️⃣ Spacing, Container & Layout

Tailwind Class	CSS Equivalent	Description
mx-auto	margin-left: auto; margin-right: auto;	Element ko horizontally center align karta hai.
p-4 / py-2 px-4	padding: 1rem;	Padding scale (1 unit = 0.25rem = 4px).
m-2 / mt-4	margin-top: 1rem;	Margin scale spacing.
w-full / h-screen	width: 100%; height: 100vh;	Width aur height dimensions.

Interactive Utility Class Simulator

Applied Classes: class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-md"

---

5️⃣ Typography & Color Palette

<!-- Heading with responsive font-size and color shades -->
<h1 class="text-2xl md:text-4xl font-extrabold text-slate-800 tracking-tight">
  Modern Web Interface
</h1>
<p class="text-base text-gray-600 leading-relaxed mt-2">
  Tailwind provides shades from 50 (lightest) to 900 (darkest).
</p>

Class	Font Size	Use Case
text-sm	0.875rem (14px)	Labels, subtitles aur captions.
text-base	1rem (16px)	Standard readable paragraph text.
text-xl & text-2xl	1.25rem - 1.5rem	Card titles aur subheadings.
text-4xl	2.25rem (36px)	Main Hero banner headings.

---

6️⃣ Flexbox & Grid Systems

1. Flexbox Alignment:

<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow">
  <div class="font-bold text-gray-800">Left Brand</div>
  <div class="flex gap-4">
    <span>Home</span>
    <span>Pricing</span>
  </div>
</div>

2. Responsive CSS Grid:

<!-- Mobile: 1 column, Tablet: 2 columns, Desktop: 4 columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <div class="p-6 bg-slate-100 rounded-lg">Card 1</div>
  <div class="p-6 bg-slate-100 rounded-lg">Card 2</div>
  <div class="p-6 bg-slate-100 rounded-lg">Card 3</div>
  <div class="p-6 bg-slate-100 rounded-lg">Card 4</div>
</div>

---

7️⃣ Responsive Breakpoints (Mobile-First)

Tailwind CSS mobile-first approach use karta hai. Unprefixed classes (jaise w-full) mobile screens par apply hoti hain aur prefixes bade screens par unhe override karte hain:

Breakpoint Prefix	Minimum Width	Device Category
sm:	640px	Landscape Phones / Small Tablets
md:	768px	Tablets / iPad portrait
lg:	1024px	Laptops / Desktops
xl:	1280px	Large Desktop Displays
2xl:	1536px	Ultra-wide Monitors