Tailwind CSS Grid Generator

An interactive, feature-rich Tailwind CSS grid generator built with Next.js and shadcn/ui. Visually create responsive grid layouts, customize columns, gaps, and items, and instantly get the code for React, Vue, or HTML.

(Note: You can replace public/placeholder.jpg with an actual screenshot of the application)

---

✨ Features

• Responsive Column Control: Independently set the number of columns for different breakpoints (SM, MD, LG, XL).
• Interactive Live Preview: See your grid layout update in real-time as you change settings.
• Resizable Preview Pane: Drag the edge of the preview window to test responsiveness across different viewport widths.
• Framework-Specific Code Generation: Get ready-to-use code for popular frameworks like Next.js, React, Vue, Nuxt, and plain HTML.
• Customizable Gaps: Easily set the gap between grid items.
• Dynamic Item Count: Add or remove grid items to match your design.
• Mock Data Templates: Populate your grid with pre-defined mock data for various use cases (E-commerce, Portfolio, Blog, etc.) or add your own.
• Alignment & Theming: Control container alignment (left/center/right) and switch between light/dark themes.
• Copy to Clipboard: Quickly copy the generated classes or the full component code with a single click.

---

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v18.x or later)
• A package manager like npm, yarn, or bun

Installation & Usage

1. Clone the repository:

   git clone https://github.com/kit1211/tailwind-grid-generator.git
   cd tailwind-grid-generator

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   bun install

3. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   bun dev

4. Open http://localhost:3000 with your browser to see the result.

---

🛠️ Technologies Used

• Framework: Next.js
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Icons: Lucide React
• Language: TypeScript