Skip to content

README.md

Latest commit

 

History

History
60 lines (41 loc) · 1.08 KB

README.md

File metadata and controls

60 lines (41 loc) · 1.08 KB
Raw

TailwindCSS - Utility-First CSS Framework

📚 Overview

TailwindCSS is a utility-first CSS framework that lets you build custom designs without leaving your HTML.

🎯 Key Features

  • ✅ Utility-first approach
  • ✅ Responsive design built-in
  • ✅ Dark mode support
  • ✅ Highly customizable
  • ✅ Small bundle size

📂 Projects

  1. TailwindIntro - Basic setup and concepts
  2. Razorpay Clone - Full-featured project

🚀 Quick Start

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

💻 Basic Usage

<div class="flex justify-center items-center h-screen bg-blue-500">
  <button
    class="bg-white text-blue-500 px-6 py-3 rounded-lg 
                  hover:bg-gray-100 transition"
  >
    Click Me
  </button>
</div>

📊 Common Utilities

  • Layout: flex, grid, block, inline
  • Spacing: m-4, p-4, gap-4
  • Colors: bg-blue-500, text-red-600
  • Sizing: w-full, h-screen
  • Responsive: sm:, md:, lg:, xl:

Master modern CSS with TailwindCSS! 🎨