TailwindChef 👨‍🍳

Stop writing repetitive Tailwind classes. Start cooking up UI components instantly.

TailwindChef is a VS Code extension that supercharges your Tailwind CSS workflow with intelligent autocomplete for common UI patterns. Type a simple abbreviation and get fully-styled, production-ready components in seconds.

✨ Features

• 🚀 Smart Autocomplete - Context-aware suggestions as you type
• 🎨 Color Schemes - Built-in color palettes with custom CSS variable support
• 📏 Size Variants - Multiple size options (xs, sm, md, lg, xl) for every component
• 🌓 Dark Mode Ready - Automatic dark mode support using Tailwind's dark classes
• ⚙️ Fully Customizable - Configure colors, sizes, and components via twc-config.js
• ⚡ Lightning Fast - No build step, works instantly

🚀 Quick Start

Installation

1. Open VS Code
2. Press Ctrl+P / Cmd+P
3. Type ext install tailwindchef
4. Press Enter

Basic Usage

1. Open any HTML, JSX, or TSX file
2. Type twc-btn:solid:primary:md
3. Press Tab or Enter to expand

Result:

<button
  class="bg-blue-500 hover:bg-blue-500/90 text-white font-semibold px-4 py-2 rounded-lg transition"
>
  Click Me
</button>

📖 How It Works

TailwindChef uses a 4-part syntax for maximum flexibility:

twc-{component}:{variant}:{color}:{size}

Syntax Breakdown

Interactive Autocomplete

As you type each part, TailwindChef shows you available options:

twc-btn          → Shows all components
twc-btn:         → Shows variants (solid, outline, ghost)
twc-btn:solid:   → Shows colors (primary, success, danger...)
twc-btn:solid:primary: → Shows sizes (xs, sm, md, lg, xl)

🎯 Available Components

Buttons

twc-btn:solid:primary:md twc-btn:outline:success:lg twc-btn:ghost:danger:sm

Cards

twc-card:default:primary:md twc-card:hover:secondary:lg
twc-card:bordered:success:sm

Badges

twc-badge:default:primary:sm twc-badge:outline:warning:md
twc-badge:dot:success:lg

Form Elements

twc-input:default:primary:md twc-input:error:danger:lg

Alerts

twc-alert:default:info:md twc-alert:simple:success:lg

Layout Components

twc-center:default:primary:md
<!-- Flex center -->
twc-stack:md:primary:md
<!-- Vertical stack -->
twc-hstack:lg:primary:md
<!-- Horizontal stack -->

⚙️ Configuration

Create a twc-config.js file in your project root to customize TailwindChef:

Basic Configuration

module.exports = {
  colorSchemes: {
    brand: {
      bg: "bg-purple-600",
      text: "text-white",
      border: "border-purple-600",
    },
    accent: {
      bg: "bg-orange-500",
      text: "text-white",
      border: "border-orange-500",
    },
  },

  sizeSchemes: {
    xs: {
      padding: "px-2 py-1",
      text: "text-xs",
      rounded: "rounded",
    },
    huge: {
      padding: "px-10 py-5",
      text: "text-2xl",
      rounded: "rounded-3xl",
    },
  },

  snippets: [],
};

Using CSS Variables (Recommended for Dark Mode)

module.exports = {
  colorSchemes: {
    primary: {
      bg: "bg-primary-bg",
      text: "text-primary-text",
      border: "border-border-color",
    },
  },
};

Then in your CSS:

:root {
  --color-primary-bg: 59 130 246; /* blue-500 */
  --color-primary-text: 255 255 255;
  --color-border: 203 213 225;
}

.dark {
  --color-primary-bg: 29 78 216; /* blue-700 */
  --color-primary-text: 243 244 246;
  --color-border: 71 85 105;
}

Custom Components

Add your own reusable components:

module.exports = {
  snippets: [
    {
      prefix: "twc-hero",
      label: "Hero Section",
      description: "Full-screen hero with CTA",
      variants: {
        center: `<section class="{{bg}} {{text}} min-h-screen flex items-center justify-center {{padding}}">
          <div class="text-center">
            <h1 class="{{textSize}} font-bold mb-4">Hero Title</h1>
            <p class="text-xl mb-6">Subtitle goes here</p>
            <button class="{{bg}} {{text}} {{padding}} {{rounded}}">Get Started</button>
          </div>
        </section>`,
        left: `<section class="{{bg}} {{text}} min-h-screen flex items-center {{padding}}">
          <div class="max-w-2xl">
            <h1 class="{{textSize}} font-bold mb-4">Hero Title</h1>
            <p class="text-xl">Subtitle goes here</p>
          </div>
        </section>`,
      },
    },
  ],
};

Available Template Variables:

• {{bg}} - Background color
• {{text}} - Text color
• {{border}} - Border color
• {{padding}} - Padding classes
• {{textSize}} - Text size
• {{rounded}} - Border radius

🎨 Default Color Schemes

📏 Default Size Schemes

🔥 Pro Tips

1. Use Tab for Quick Expansion

Press Tab when you have a valid TailwindChef command to expand it instantly.

2. Mix and Match

Combine different variants, colors, and sizes to create the perfect component:

twc-btn:outline:success:xl  <!-- Large outlined success button -->
twc-card:hover:danger:sm    <!-- Small hoverable danger card -->

3. Hot Reload Config

Changes to twc-config.js are automatically detected. No need to restart VS Code!

4. Use in React/Vue/Any Framework

TailwindChef works with HTML, JSX, TSX, and any file where you write Tailwind classes.

🤝 Contributing

Found a bug? Want to add a component? Contributions are welcome!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-component)
3. Commit your changes (git commit -m 'Add amazing component')
4. Push to the branch (git push origin feature/amazing-component)
5. Open a Pull Request

📝 License

MIT © ayushpapnai

🙏 Acknowledgments

• Built with ❤️ for the Tailwind CSS community
• Inspired by the need for faster UI development
• Tailwind CSS logo and brand © Tailwind Labs Inc.

Enjoy cooking with TailwindChef! 👨‍🍳✨

⭐ Star on GitHub | 🐛 Report Bug | 💡 Request Feature