🌟 Tailwind CSS Practice & Projects

Welcome to my Tailwind CSS practice and project collection! This repository contains hands-on experiments, mini-projects, and components built using the powerful utility-first CSS framework — Tailwind CSS.

---

🧠 What is Tailwind CSS?

Tailwind CSS is a modern, utility-first CSS framework that allows developers to rapidly build custom designs directly in their markup. It provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

---

🚀 Key Concepts Practiced

• Tailwind CDN and CLI-based setups
• Responsive design using breakpoints (sm, md, lg, etc.)
• Utility classes for spacing, colors, fonts, and layouts
• Customizing Tailwind via tailwind.config.js
• Dark mode support
• Flexbox and Grid layouts
• Reusable UI components

---

🛠 How to Use

1. Clone the repo:

   git clone https://github.com/NoraizRana/tailwind-css-practice.git
   cd tailwind-css-practice

2. **Open with Live Server:**
   You can use VS Code with the **Live Server** extension to view projects in the browser.

3. **(Optional) Build Tailwind (for CLI projects):**

   ```bash
   npm install
   npx tailwindcss -i ./input.css -o ./output.css --watch
   ```

---

## 💡 Why This Repo?

This repository is part of my personal frontend journey to become more efficient with Tailwind CSS. It serves as:

* A reference for common Tailwind patterns
* A playground for testing out UI ideas
* A showcase of reusable components and layouts

---

## 📸 Screenshots (Coming Soon)

Stay tuned! I’ll be adding previews and screenshots for each project folder.

---

## 🧑‍💻 Author

**Noraiz Rana**
Frontend Developer & Learner
https://github.com/NoraizRana


---

## 📜 License

This project is licensed under the MIT License — feel free to use and modify it for your own learning and projects!