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.
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. Learn more.
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.
Update: At the moment the Tailwind UI can't be opened in the Library panel, due to a technical issue. Please copy paste components manually from the Tailwind UI page or use this workaround.
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 »
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.
Get support when you need it and participate in our friendly user community in the online forum.
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.
Yes you can. Use the Customize visual controls to let Pinegrow inspect your TailwindCSS stylesheet and adjust the visual controls accordingly.
Most Tailwind features are supported, including colors, fonts, sizes, pseudo classes, screen sizes, animations...
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. It comes with the full range of visual controls and supports working with custom TailwindCSS themes.
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.
An online space where children learn HTML & CSS and practice their skills on fun creative web projects.