Tailwind Visual Editor inside your IDEPiny 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. 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
📺 Quick Overview▶️ Watch Quick Overview (90 seconds) 🌟 FeaturesAll 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 FeaturesVisual Tailwind ControlsClick elements in your code and visually style them with intuitive Tailwind CSS controls. Changes instantly sync to your code. Tailwind Class InspectorManage complex Tailwind styles in an organized visual tree. Supports editing hover, focus, active, and responsive states. Edit Tailwind Classes EverywhereDirectly edit Tailwind classes within strings, variables, and non-React/Astro code. Component NavigationQuickly navigate and preview components across your project. AI-Powered Drag & DropRapidly build UI with visual drag & drop powered by your own AI provider key. Pro FeaturesVisual SelectClick elements visually in the preview and directly jump to their corresponding components in the code. Multi-Element EditingUse Project-wide Component NavigationNavigate and manage components across your entire project from a single interface. Custom Tailwind ThemesImport your custom Tailwind configurations including colors, fonts, and spacing. 📺 Watch the Getting Started Video (15 min)💰 Pricing
📄 Documentation & SupportCreated by Pinegrow team 🌲 | getpiny.com |