Up to 50% OFF all Pinegrow editions and add-ons
a desktop app for Mac, Windows and Linux that lets you visually edit your TailwindCSS projects.
Tailwind Visual Editor is an add-on for Pinegrow Web Editor, a powerful desktop HTML & CSS editor. This means that you use all features of Pinegrow in your Tailwind projects.
Free trial is included. All features, including interactions and WordPress theme builder, are fully functional in the free trial.
No more guessing the class names or copy-pasting from documentation. The editor comes with visual controls for most Tailwind utilities.
Use Pinegrow’s multi-view editing to see and edit the page displayed at multiple sized.
Use the Pseudo state selector to style the elements in hovered, focused and other states.
Turn the design of any element into a Style and reuse it on other elements. When you modify a style the classes on all elements that use that style are automatically updated.
In cases where creating a new sub-style would be an overhead, use inline classes to override style properties on individual elements.
Create sub-styles that define one or more variants of the parent style.
Swap colors and click on any Tailwind class to jump to its Visual control in the Properties panel.
The Library panel comes with a bunch of page libraries from where you can add ready-made components to the page. You can even load your own local or remote websites and use them as component libraries.
TailwindUI is a premium Tailwind component library created by authors of TailwindCSS. Tailwind Visual Editor lets you open your TailwindUI library in the Library panel and extends visual controls with Tailwind UI extensions.
Please note that Tailwind UI library itself is not included or distributed with Tailwind Visual Editor. You need to purchase the appropriate license directly from the TailwindUI website.
Tailwind Visual Editor works with your existing web projects and integrates into your workflow. Tailwind Visual Editor opens and saves standard HTML files. It makes no assumptions about your build process, so you can use it CDN, PostCSS, Gulp, Webpack and so on.
That means that you get to use all the powerful HTML & CSS editing features of Pinegrow in your Tailwind projects as well.
Please select a payment plan:
Use Pinegrow for as long as your subscription is active and keep your license always up to date. You will be automatically charged every year. You can cancel the subscription at any time.
Bring your projects alive with interactions, animations and scroll scenes. Learn more »
Create fully-featured custom WordPress themes without coding. Learn more »
Powerful visual editor for your Tailwind CSS projects. Learn more »
Need help? Take a look at feature comparison.
Work smarter with HTML projects:
Powerful visual editor for designing web interactions and animations:
|Powered by GreenSock, license included|
Create production-ready custom WordPress themes:
|WP theme builder|
|Blocks for WordPress|
Our order process is conducted by our online reseller Paddle.com. Paddle.com is the Merchant of Record for all our orders. Paddle provides all customer service inquiries and handles returns.
Not 100% sure if Pinegrow is right for you? No worries. Try it without risk. Please note that refunds are not available for monthly subscriptions. Details.
We work on Pinegrow full-time and publish frequent new releases. Check out the timeline of Pinegrow releases to see how fast Pinegrow is improving.
No. Tailwind Visual Editor is an add-on for Pinegrow Web Editor. It is distributed in the main Pinegrow install package, there is nothing extra to download. You do need a Pinegrow license that includes the Tailwind editor.
In Pinegrow, go to Support -> Purchase & Activate and click on “Get it” under the Tailwind Visual Editor add-on. That will take you to Pinegrow online shop where you can purchase the add-on (and we have a special deal for our existing users).
Well, it depends. On one hand, TailwindCSS hides the complexities of having to deal with CSS rules, inheritance, media queries and pseudo states.
On the other hand, working with TailwindCSS efficiently usually requires a build process that is not so simple to setup (we might do a tutorial on this).
The best approach is that you give it a try and see how it feels.
This can be done outside of Tailwind Visual Editor, with various tools for packaging web projects.
Not at the moment. TailwindCSS stylesheet is usually compiled as a part of project’s build process. Pinegrow doesn’t make any assumptions about that so that it can be used with your existing workflow. So, just customize Tailwind outside of Pinegrow as you normally do.
You can’t at the moment. This feature is on the roadmap.
Tailwind Visual Editor stores class style information in
data-pg-class-style-inline HTML element attributes. You can safely remove these attributes when deploying the page, just don’t remove them in the source project because the information about assigned styles and inline classes would be lost. The style definitions are kept in
projectdb.pgml file. It’s recommended to keep this file under source control.
All our web development applications work with your local projects and work well together with your other tools.
General purpose HTML & CSS editor that lets you build responsive websites faster with live multi-page editing, CSS & SASS styling, CSS Grid editor and smart components for Bootstrap, Foundation and the possibility to add custom frameworks.
Pinegrow Interactions is a powerful visual editor for designing web interactions and animations. Pinegrow Interactions extends Pinegrow Web Editor with interaction composer and fully-featured animation timeline editor based on GSAP.
Pinegrow Web Editor with integrated WordPress theme creator. Add WordPress smart actions to page elements to impart dynamic CMS functionality to the theme.
Export fully-featured, proper WordPress themes with content custom-tailored to each project.
Standalone WordPress theme builder that lets you use any website builder to create custom WordPress themes.
After the conversion is set up, you keep using the original website editor to make changes to the theme.
An add-on for Pinegrow Web Editor that lets you visually edit TailwindCSS projects.
Take static HTML snapshots of dynamic web applications and use them for collaboration, styling and prototyping.
Open your app in Pinegrow Snapshots, navigate to any screen or state and save it as a static HTML snapshot.
Great in combination with Pinegrow Web Editor.