Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Tailwind Editor – PinyNew to Visual Studio Code? Get it now.
Tailwind Editor – Piny

Tailwind Editor – Piny

Pinegrow Pte. Ltd.

pinegrow.com
|
506 installs
| (2) | Free
Visually edit Tailwind CSS in React, Next.js & Astro.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Tailwind Visual Editor inside your IDE

Piny lets you visually edit Tailwind CSS right in your React, Next.js, and Astro files. No browser context-switching, no vendor lock-in. Click an element, tweak its classes, and the code updates instantly.

Piny in Visual Studio Code

Get Piny Pro to select elements directly in the browser preview, and more.

⚠️ Piny works with Astro, React, or Next.js projects. For static HTML or WordPress, use Pinegrow Web Editor instead. Learn more →

🎉 Piny now supports Astro!

Visually style and navigate your Astro projects. ▶️ See it in action in this 1 minute video.

🚀 Getting Started

  1. Install the Piny Extension (you are doing this now)

  2. Start Editing: Right-click anywhere in your code and select Edit in Piny to launch visual editing controls.

Edit in Piny

📺 Quick Overview

▶️ Watch Quick Overview (90 seconds)

🌟 Features

All edits happen directly in the code. There is no abstraction, no lock-in. Piny is here when you need it and gets out of your way when you don't.

Free Features

Visual Tailwind Controls

Click elements in your code and visually style them with intuitive Tailwind CSS controls. Changes instantly sync to your code.

Your browser does not support the video tag.

Tailwind Class Inspector

Manage complex Tailwind styles in an organized visual tree. Supports editing hover, focus, active, and responsive states.

Your browser does not support the video tag.

Edit Tailwind Classes Everywhere

Directly edit Tailwind classes within strings, variables, and non-React/Astro code.

Your browser does not support the video tag.

Component Navigation

Quickly navigate and preview components across your project.

Your browser does not support the video tag.

AI-Powered Drag & Drop

Rapidly build UI with visual drag & drop powered by your own AI provider key.

Your browser does not support the video tag.

Pro Features

Visual Select

Click elements visually in the preview and directly jump to their corresponding components in the code.

Your browser does not support the video tag.

Multi-Element Editing

Use CMD/CTRL + Click or SHIFT + Click to select multiple elements simultaneously and style them collectively.

Your browser does not support the video tag.

Project-wide Component Navigation

Navigate and manage components across your entire project from a single interface.

Your browser does not support the video tag.

Custom Tailwind Themes

Import your custom Tailwind configurations including colors, fonts, and spacing.

Your browser does not support the video tag.

📺 Watch the Getting Started Video (15 min)

Getting Started Video

💰 Pricing

Plan Pricing Features
Free Free Core editing features, Tailwind controls, AI drag & drop
Pro Early Access (Limited Time Offer) 60% OFF (Limited Time) Check pricing and get Piny Pro Visual select, multi-element editing, project navigation, custom themes

Early Access: Lock in the discounted Early Access price for life if you subscribe by May 28, 2025.

📄 Documentation & Support

  • Website
  • Documentation
  • Support
  • Discord

Created by Pinegrow team 🌲 | getpiny.com

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft