Sistem Titik Henti Tailwind

<!-- Mobile-first: unprefixed = mobile, md: = tablet+, lg: = desktop+ -->
<div class="text-sm md:text-base lg:text-lg">
  Small text on mobile, base on tablet, large on desktop
</div>

/*
Default Tailwind breakpoints:

sm:   @media (min-width: 640px)   — large phones, small tablets
md:   @media (min-width: 768px)   — tablets
lg:   @media (min-width: 1024px)  — small laptops
xl:   @media (min-width: 1280px)  — desktops
2xl:  @media (min-width: 1536px)  — large desktops

Usage: prefix any utility with sm:, md:, lg:, xl:, or 2xl:
*/
<div class="p-4 sm:p-6 md:p-8 lg:p-12">
  Padding grows at each breakpoint
</div>

<!-- Reading this correctly:
  - text-sm: applies on ALL screens (mobile baseline)
  - md:text-base: overrides at 768px+ (tablets and up)
  - lg:text-lg: overrides at 1024px+ (laptops and up)
  This is mobile-first: start small, add size at larger breakpoints -->
<p class="text-sm md:text-base lg:text-lg xl:text-xl leading-relaxed">
  Responsive typography from mobile to desktop.
</p>

<!-- Breakpoint + hover combined -->
<button class="bg-blue-500 text-white px-4 py-2 rounded md:hover:bg-blue-700 transition-colors">
  Hover only works on md+ screens
</button>

<!-- Breakpoint + focus combined -->
<input
  type="text"
  class="border rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 md:focus:ring-4"
  placeholder="Wider ring on desktop focus"
/>

<!-- Stack on mobile, horizontal on tablet+ -->
<div class="flex flex-col md:flex-row gap-6">
  <div class="md:w-1/2 bg-blue-100 p-6 rounded-xl">
    <h2 class="text-xl font-bold">Left Panel</h2>
    <p class="text-gray-600 mt-2">Content stacks below on mobile.</p>
  </div>
  <div class="md:w-1/2 bg-indigo-100 p-6 rounded-xl">
    <h2 class="text-xl font-bold">Right Panel</h2>
    <p class="text-gray-600 mt-2">Sits side by side on md+ screens.</p>
  </div>
</div>

<!-- Responsive product grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-white border rounded-xl p-4 shadow-sm">
    <div class="h-32 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-lg mb-3"></div>
    <h3 class="font-semibold">Product A</h3>
    <p class="text-blue-600 font-bold mt-1">$29</p>
  </div>
  <div class="bg-white border rounded-xl p-4 shadow-sm">
    <div class="h-32 bg-gradient-to-br from-pink-400 to-rose-600 rounded-lg mb-3"></div>
    <h3 class="font-semibold">Product B</h3>
    <p class="text-blue-600 font-bold mt-1">$39</p>
  </div>
  <div class="bg-white border rounded-xl p-4 shadow-sm">
    <div class="h-32 bg-gradient-to-br from-emerald-400 to-teal-600 rounded-lg mb-3"></div>
    <h3 class="font-semibold">Product C</h3>
    <p class="text-blue-600 font-bold mt-1">$49</p>
  </div>
  <div class="bg-white border rounded-xl p-4 shadow-sm">
    <div class="h-32 bg-gradient-to-br from-amber-400 to-orange-600 rounded-lg mb-3"></div>
    <h3 class="font-semibold">Product D</h3>
    <p class="text-blue-600 font-bold mt-1">$59</p>
  </div>
</div>

<!-- max-* breakpoints for range targeting -->
<div class="space-y-2">
  <!-- Only visible on mobile (below sm) -->
  <div class="block sm:hidden bg-red-100 p-3 rounded">Mobile only</div>

  <!-- Only visible on tablet (sm to lg) -->
  <div class="hidden sm:block lg:hidden bg-yellow-100 p-3 rounded">Tablet only</div>

  <!-- Only visible on desktop (lg+) -->
  <div class="hidden lg:block bg-green-100 p-3 rounded">Desktop only</div>
</div>

// tailwind.config.js — extending with custom breakpoints
module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '480px',     // Extra small phones
        '3xl': '1920px',   // Ultra-wide monitors
      }
    }
  }
}

// Usage after config:
// <div class="xs:text-base 3xl:text-2xl">

<!-- Responsive page section padding -->
<section class="px-4 sm:px-6 lg:px-8 py-10 md:py-16 lg:py-24">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-6 lg:mb-12">
      Our Features
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-10">
      <div class="bg-white p-6 rounded-xl shadow-sm">Feature 1</div>
      <div class="bg-white p-6 rounded-xl shadow-sm">Feature 2</div>
      <div class="bg-white p-6 rounded-xl shadow-sm">Feature 3</div>
    </div>
  </div>
</section>

<!-- Debug banner: shows current active breakpoint -->
<div class="fixed top-0 left-0 right-0 bg-black text-white text-center text-xs py-1 z-50">
  <span class="sm:hidden">XS (below 640px)</span>
  <span class="hidden sm:inline md:hidden">SM (640-767px)</span>
  <span class="hidden md:inline lg:hidden">MD (768-1023px)</span>
  <span class="hidden lg:inline xl:hidden">LG (1024-1279px)</span>
  <span class="hidden xl:inline 2xl:hidden">XL (1280-1535px)</span>
  <span class="hidden 2xl:inline">2XL (1536px+)</span>
</div>

<!-- Workflow example: hero section, mobile-first -->
<section
  class="
    px-4 py-12
    sm:px-6 sm:py-16
    lg:px-8 lg:py-24
    bg-gradient-to-br from-indigo-600 to-purple-700
  "
>
  <div class="max-w-4xl mx-auto text-center text-white">
    <h1
      class="
        text-3xl font-bold leading-tight
        sm:text-4xl
        lg:text-5xl lg:leading-snug
      "
    >
      Build Faster UIs
    </h1>
    <p class="mt-4 text-lg opacity-80 sm:text-xl lg:mt-6 max-w-2xl mx-auto">
      Tailwind's responsive utilities help you design from mobile to desktop.
    </p>
    <button class="mt-6 lg:mt-8 bg-white text-indigo-700 px-8 py-3 rounded-full font-bold hover:shadow-lg transition-shadow">
      Get Started
    </button>
  </div>
</section>