Tailwind CSS Cheat Sheet

🧑‍🏫 Sabse pehle — simple mein samjho#

Ye ek quick reference page hai jab tum fast UI bana rahe ho. Ise bookmark karke rakho! Yaad rakhna, 1 unit = 4px (to p-4 = 16px).

1. Spacing (Margin & Padding)#

p-4        <!-- Padding 16px all sides -->
px-4       <!-- Padding Left & Right 16px -->
py-2       <!-- Padding Top & Bottom 8px -->
mt-4       <!-- Margin Top 16px -->
-mb-2      <!-- Negative Margin Bottom -8px -->
mx-auto    <!-- Center an element horizontally (Margin X Auto) -->
space-x-4  <!-- Adds 16px gap between all child elements horizontally (Legacy, prefer Flex gap) -->

2. Sizing (Width & Height)#

w-full       <!-- Width 100% -->
w-screen     <!-- Width 100vw -->
w-1/2        <!-- Width 50% -->
w-[300px]    <!-- Arbitrary precise width -->
h-screen     <!-- Height 100vh -->
min-h-screen <!-- Minimum Height 100vh -->

3. Typography#

text-sm         <!-- Small text (14px) -->
text-base       <!-- Normal text (16px) -->
text-2xl        <!-- Large heading (24px) -->
font-bold       <!-- Font weight 700 -->
text-center     <!-- Center alignment -->
leading-relaxed <!-- Increased Line Height -->
tracking-wide   <!-- Increased Letter Spacing -->
truncate        <!-- Truncates overflow with ... -->

4. Flexbox & Grid#

flex                 <!-- Display Flex -->
flex-col             <!-- Vertical Flex -->
justify-center       <!-- Horizontal Center (in row) -->
items-center         <!-- Vertical Center (in row) -->
gap-4                <!-- 16px gap between items -->

grid grid-cols-3     <!-- Grid with 3 equal columns -->
col-span-2           <!-- Item spans 2 columns -->

5. Borders & Shadows#

border             <!-- 1px solid border -->
border-b-2         <!-- 2px solid bottom border -->
border-gray-300    <!-- Border Color -->
rounded-lg         <!-- Large Border Radius -->
rounded-full       <!-- Perfect Circle (if w == h) -->
shadow-md          <!-- Medium Drop Shadow -->

6. States & Responsive#

hover:bg-blue-600  <!-- Hover state -->
focus:ring-2       <!-- Focus state (Accessibility) -->
active:scale-95    <!-- Click state animation -->
md:flex            <!-- Display flex ONLY on tablet screens and above -->
dark:bg-black      <!-- Dark mode styles -->

7. Transitions & Effects#

transition         <!-- Smooths out state changes -->
duration-300       <!-- 300ms transition time -->
opacity-50         <!-- 50% transparency -->
bg-black/50        <!-- 50% transparent background color (v3/v4 syntax) -->
backdrop-blur-md   <!-- Glassmorphism blur effect -->

8. Positioning#

relative           <!-- Position relative (Anchor for absolute) -->
absolute           <!-- Position absolute -->
inset-0            <!-- top-0, right-0, bottom-0, left-0 -->
z-50               <!-- High stacking order -->
sticky top-0       <!-- Sticks to the top of screen on scroll -->

🎮 The Master Playground#

Now that you've seen the cheat sheet, try combining everything you've learned into this master component!

<!-- Try modifying ANY of these classes! -->
<!-- Change bg-slate-900 to bg-white, change text-white to text-black... play around! -->
<div class="max-w-md mx-auto relative group">
  <!-- Decorative background blur -->
  <div class="absolute -inset-1 bg-gradient-to-r from-pink-600 to-purple-600 rounded-3xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
  
  <!-- Main Card -->
  <div class="relative p-8 bg-slate-900 ring-1 ring-white/10 rounded-3xl shadow-2xl flex flex-col items-center text-center">
    <!-- Icon -->
    <div class="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center mb-6 ring-1 ring-white/20 group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
      <span class="text-3xl">🚀</span>
    </div>
    
    <h3 class="text-2xl font-bold text-white tracking-tight m-0">Master Tailwind</h3>
    <p class="text-slate-400 mt-3 text-sm leading-relaxed mb-6">
      You now have the power to build incredible user interfaces purely with utility classes. No context switching, no naming fatigue.
    </p>
    
    <!-- Action Grid -->
    <div class="w-full grid grid-cols-2 gap-3">
      <button class="py-2.5 bg-white/10 hover:bg-white/20 text-white text-sm font-semibold rounded-xl transition-colors backdrop-blur-sm">
        Documentation
      </button>
      <button class="py-2.5 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white text-sm font-bold rounded-xl transition-all shadow-lg hover:shadow-pink-500/25">
        Start Building
      </button>
    </div>
  </div>
</div>