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

• undefinedAI-Powered Component Generation: Ask the AI to create Tailwind CSS components using natural language
• undefinedLive Preview: See your components render instantly in a side-by-side preview pane
• undefinedMonaco Editor: Professional code editing experience with syntax highlighting
• undefinedReal-time Updates: Changes in the editor are immediately reflected in the preview
• undefinedTailwind 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

• undefinedNext.js 15 - React framework
• undefinedMonaco Editor - VS Code’s editor component
• undefinedAI SDK - Vercel AI SDK for streaming responses
• undefinedDeepSeek - AI model integration
• undefinedTailwind 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 DeepSeek 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 requests (e.g., “create a responsive navigation bar with dark mode”)
• The AI returns pure HTML with Tailwind classes - no frameworks or extra code
• You can manually edit the generated code in the editor
• The preview updates automatically as you type

License

Private project for Bardui.com