Tailwind Visual Editor
for Pinegrow

A desktop app for Mac, Windows and Linux that lets you visually edit your Tailwind CSS 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.

Download for Mac, Windows & Linux

Free trial is included. All features, including interactions and WordPress theme builder, are fully functional in the free trial.

Tailwind Visual Editor

Features

Visual Controls

Style your project with visual controls.

No more guessing the class names or copy-pasting from documentation. The editor comes with visual controls for most Tailwind utilities.

Create responsive designs.

Use Pinegrow’s multi-view editing to see and edit the page displayed at multiple sized.

Use visual controls with your custom theme.

Visual controls adjust to your customized Tailwind CSS theme. Learn more.

Style elements with powerful Class Tree inspector

Inspect and edit Tailwind CSS classes and variants with speed and precision. Learn more.

Tailwind Styles

Group Tailwind classes into reusable Styles. Update all styled elements with one move.

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.

Override styles with inline classes.

In cases where creating a new sub-style would be an overhead, use inline classes to override style properties on individual elements.

Create style variants with sub-styles.

Create sub-styles that define one or more variants of the parent style.

Helpers

Little helpers that will save you lots of time.

Swap colors and click on any Tailwind class to jump to its Visual control in the Properties panel.

Libraries

Load any website and use it as a component library.

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 support.

TailwindUI is a premium Tailwind component library created by authors of Tailwind CSS. 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.

It's your workflow!

Tailwind Visual Editor works with any HTML project and integrates into your existing workflow.

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.

Plus, you get everything from
Pinegrow Web Editor.

Tailwind Visual Editor works inside Pinegrow Web Editor.

That means that you get to use all the powerful HTML & CSS editing features of Pinegrow in your Tailwind projects as well.

    

Get Pinegrow for yourself, your business or your school.

Get Tailwind Visual Editor

with 30 days money-back guarantee

Already have Pinegrow Web Editor? Get Tailwind Editor add-on..

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.

Pinegrow Web Editor PRO

Build web projects with powerful tools for editing HTML & CSS - visually and with code.

  • Bootstrap
  • Foundation
  • Plain HTML
  • Components
  • Live SASS Editing
  • Multiple views
  • Edit URLs
  • PHP, ASP & ERB
  • Master pages
  • Font Awesome
  • and more...
Save 50%
USD 99
USD 49.50
per year

Select add-ons:

Interactions

Bring your projects alive with interactions, animations and scroll scenes. Learn more »

+
Save 50%
USD 200
USD 50
one time
Interactions are not available with one time payment. You can get them as a separate add-on subscription.
FREE
Tailwind Visual Editor

Powerful visual editor for your Tailwind CSS projects. Learn more »

+
Save 50%
USD 50
USD 25
per year
WordPress Builder

Create custom WordPress themes, plugins and blocks - without coding. Learn more »

+
Save 50%
USD 50
USD 25
per year
Shop Builder for WooCommerce

Create custom WooCommerce stores and blocks (requires WordPress Builder). Learn more »

+
Save 50%
USD 50
USD 25
per year
The add-on is not available as a one time payment.
Subscribe

Need help deciding? Take a look at feature comparison.

Are you a student, non-profit or educator? We have a special plan for you.

If you can't afford Pinegrow at the moment, get in touch and we'll find a solution.

Pinegrow Web Editor Pro

Work smarter with HTML projects:

HTML
CSS, SASS & LESS
Live editing
Multiple views
Edit code
Open URLs
Dynamic HTML elements
HTML snippets
Responsive
Bootstrap
Foundation
Blocks
PHP, ASP, ERB
Font Awesome
Projects
Master pages
Smart components
Editable areas
Reusable libraries
Partials
Static CMS

Interactions

Powerful visual editor for designing web interactions and animations:

Interactions
Scroll scenes
Timeline editor
Powered by GreenSock, license included

WordPress Theme Builder

Create production-ready custom WordPress themes:

WP theme builder
Blocks for WordPress

Tailwind Visual Editor

Visual controls and power tools for Tailwind CSS:

Visual controls
Responsive editing
Styles
Helpers
Component libraries

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.

30 days Money-back guarantee

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.

Support & friendly community

Get support when you need it and participate in our friendly user community in the online forum.

Active development

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.

Frequently Asked Questions

Is Tailwind Visual Editor a standalone app?

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.

I already have Pinegrow Web Editor. How can I upgrade to Tailwind Visual 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).

Is Tailwind CSS suitable for beginners?

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.

How can I remove unused classes from my Tailwind CSS stylesheet?

This can be done outside of Tailwind Visual Editor, with various tools for packaging web projects.

Can I customize Tailwind with Tailwind Visual Editor?

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.

How can I adjust visual controls so that they would reflect my custom Tailwind colors, spacing, responsive variants and so on?

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...

Can I remove class styles attributes when deploying my project to production servers?

Tailwind Visual Editor stores class style information in data-pg-class-style and 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.

Meet all our products

All our web development applications work with your local projects and work well together with your other tools.

Pinegrow Web Editor

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.

Vue Designer

Vue Designer is a visual IDE for Vue applications. It works with every Vite project and frameworks such as Nuxt and Iles.

Pinegrow Interactions

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 WordPress Theme Builder

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.

Pinegrow WordPress Plugin

Install Pinegrow on your WordPress site and turn it into a visual development environment for building custom blocks, whole themes and static HTML projects.

Use same features as WordPress Builder in Pinegrow Web Editor.

Pinegrow Theme Converter for WordPress

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.

Tailwind Visual Editor

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.

Pinegrow Snapshots

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.

HTML Planet for Kids

An online space where children learn HTML & CSS and practice their skills on fun creative web projects.