An advanced AI Online Playground for Tailwind CSS, Avoid sending useless messages to the AI agent.

AI Tailwind Playground

An advanced AI-powered online playground for Tailwind CSS, built for Bardui.com. This interactive development environment allows you to generate and preview Tailwind CSS components in real-time using AI.

Features

• AI-Powered Component Generation: Ask the AI to create Tailwind CSS components using natural language
• Live Preview: See your components render instantly in a side-by-side preview pane
• Monaco Editor: Professional code editing experience with syntax highlighting
• Real-time Updates: Changes in the editor are immediately reflected in the preview
• Tailwind CSS v4: Powered by the latest Tailwind CSS browser runtime

How It Works

1. Type your request in the search input (e.g., "create a tailwind card component")
2. The AI generates HTML code with Tailwind CSS classes
3. The code appears in the Monaco editor on the left
4. The live preview on the right shows the rendered component instantly
5. Edit the code manually or ask for more changes

Tech Stack

• Next.js 15 - React framework
• Monaco Editor - VS Code's editor component
• AI SDK - Vercel AI SDK for streaming responses
• DeepSeek - AI model integration
• Tailwind CSS v4 - Utility-first CSS framework

Getting Started

1. Clone the repository

2. Install dependencies:

   npm install
   

3. Set up your environment variables: Create a .env.local file and add your Claude API key:

   DEEPSEEK_API_KEY=your_api_key_here
   

4. Run the development server:

   npm run dev
   

5. Open http://localhost:3000 in your browser

Project Structure

├── src/
│   ├── app/
│   │   ├── api/chat/        # API route for AI chat
│   │   ├── chat/            # Chat page component
│   │   └── page.tsx         # Main playground page
│   └── components/
│       └── search-input.tsx # AI input component

Usage Tips

• Be specific in your reques