Typography

🧑‍🏫 Sabse pehle — simple mein samjho#

Text ko sundar dikhana UI design ka sabse important hissa hai. Tailwind mein font-size bada ya chota karne ke liye t-shirt sizes jaisi classes milti hain: sm, md, lg, xl, 2xl. Saath hi, font kitna mota (bold) hoga uske liye font- prefix use hota hai. Kamal ki baat ye hai ki Tailwind khud-ba-khud line-height (leading) adjust kar leta hai taaki text always readable lage.

Text Sizing (text-)#

Tailwind provides a logical sizing scale. By default, applying a text size also applies a corresponding line-height (leading).

• text-xs (Extra small - 12px)
• text-sm (Small - 14px)
• text-base (Normal - 16px - This is the browser default)
• text-lg (Large - 18px)
• text-xl (Extra Large - 20px)
• text-2xl, text-3xl, up to text-9xl for massive hero headings.

Font Weight (font-)#

Adjusts the thickness of the text.

• font-light (300 weight)
• font-normal (400 weight - Default)
• font-medium (500 weight)
• font-semibold (600 weight)
• font-bold (700 weight)
• font-extrabold (800 weight)
• font-black (900 weight)

Font Families#

Tailwind ships with three primary font stacks out of the box:

• font-sans (Sans-serif - The default for most web apps)
• font-serif (Serif - Great for reading long articles)
• font-mono (Monospace - Ideal for code blocks)

Tracking (Letter Spacing)#

Controls the spacing between individual characters.

• tracking-tighter (Very squeezed)
• tracking-tight (Slightly squeezed)
• tracking-normal (Default)
• tracking-wide (Spaced out)
• tracking-widest (Heavily spaced out - Excellent for uppercase subheadings)

Leading (Line Height)#

Controls the vertical spacing between lines of text.

• leading-none (Line height matches font size - used for huge headings)
• leading-tight (Slightly compressed)
• leading-snug
• leading-normal (Default paragraph spacing)
• leading-relaxed (Good for long-form reading)
• leading-loose (Very spaced out)

Alignment and Formatting#

• Alignment: text-left, text-center, text-right, text-justify.
• Transformation: uppercase, lowercase, capitalize, normal-case.
• Decoration: underline, line-through, no-underline.
• Truncation: The truncate class is a lifesaver. It automatically prevents text from wrapping, hides overflow, and adds an ellipsis (...) at the end.

<!-- Try modifying text sizes, tracking, and leading below! -->
<div class="max-w-md mx-auto p-8 bg-slate-900 text-white rounded-xl shadow-2xl">
  <p class="text-sm font-semibold tracking-widest text-emerald-400 uppercase mb-2">New Release</p>
  <h1 class="text-4xl sm:text-5xl font-black tracking-tight leading-none mb-4">
    Typography <br/> <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Mastery</span>
  </h1>
  <p class="text-lg font-medium text-slate-300 leading-relaxed mb-6">
    Tailwind makes it incredibly easy to control font families, weights, letter spacing, and line heights all with simple utility classes.
  </p>
  <button class="px-6 py-3 bg-white text-slate-900 font-bold rounded-lg text-sm uppercase tracking-wide hover:bg-slate-200 transition">
    Learn More
  </button>
</div>