Home/ Documentation/ Tailwind Visual Editor

Tailwind Visual Editor

Build and edit Tailwind CSS 4 pages in Pinegrow with visual controls, compile the Tailwind stylesheet into your project or use your own build, and find the right page of the Tailwind Visual Editor documentation.

The Tailwind Visual Editor lets you build and edit Tailwind CSS pages in Pinegrow with visual controls instead of typing utility classes by hand. You work on your own HTML files: Pinegrow adds and removes Tailwind classes on the selected element, shows the result in the page view at every breakpoint, and keeps the Tailwind stylesheet of the page up to date.

This documentation is written for Tailwind CSS 4. Pinegrow supports Tailwind CSS 3 too; Working with Tailwind CSS 3 explains what's different.

For an overview of what you can build, see the Tailwind Visual Editor product page.

A Tailwind CSS 4 page, the Pine Adventures sample site, open in Pinegrow. The hero heading Join us on a Pine Adventure is selected in the page view, and the Visual controls panel on the right shows its Tailwind classes, the screen size tabs and the Text controls with Font display, Size 6xl and Color text-pine.
Select an element and set its Tailwind classes with the controls in the Visual controls panel.

What you need

  • Pinegrow Desktop with the Tailwind Visual Editor add-on. The add-on is included in the free trial. After the trial, your licence must include it. Without the add-on, Pinegrow still opens Tailwind pages, but doesn't show the Tailwind controls.
  • Or Pinegrow Online. It has the same Tailwind features as Pinegrow Desktop, except the external build process, which needs Pinegrow Desktop.

Where the Tailwind CSS comes from

A Tailwind page needs a stylesheet with the CSS for the classes it uses. Pinegrow can provide it in three ways:

  • The Tailwind CDN script. New Tailwind pages start with a script that builds the CSS in the browser. It's quick for prototypes, but every visitor loads it from the internet.
  • The built-in compiler. Activate the Design panel and Pinegrow writes the CSS to tailwind_theme/tailwind.css in your project, so the published site doesn't load Tailwind from another server.
  • Your own build process. Keep compiling with npm or the Tailwind CLI, and edit the pages in Pinegrow Desktop.

Tailwind CSS versions, compiling and offline use explains each option and how to switch from the CDN to a compiled stylesheet before you publish.

Start here

  1. Create or open a Tailwind CSS project. A new Tailwind CSS 4 project gets a compiled stylesheet right away.
  2. Read Tailwind CSS versions, compiling and offline use to choose how your pages get their CSS.
  3. Style elements with the visual controls.

Questions? Tailwind CSS questions and answers answers the common ones.

Pages in this section

Get started

Compile and customize

Edit and style

Components and learning

What’s new in the Tailwind Visual Editor

Tailwind Visual Editor changes in each Pinegrow release, newest first, from Tailwind CSS 4 support and Tailwind 3 to 4 conversion to component styles and the CSS Grid editor.

Introduction to Tailwind CSS

How Tailwind CSS 4 styles a page with utility classes, theme values, responsive and state variants, container queries and arbitrary values, how to keep long class lists manageable, and which Pinegrow tools edit them.

Create or open a Tailwind CSS project

Create a new Tailwind CSS 4 project in Pinegrow with a compiled local stylesheet, keep it in the folder you choose, or open an existing Tailwind project, including one that uses its own npm build.

Activate the Tailwind extension

Pinegrow activates the Tailwind Visual Editor on Tailwind pages automatically. Check that it’s active, and activate it by hand when your stylesheet has another name.

Tailwind CSS versions, compiling and offline use

Pinegrow supports Tailwind CSS 4 and 3. Prototype with the Tailwind CDN script, compile a local stylesheet with the built-in compiler so the site makes no Tailwind requests, or keep your own build process. Learn which to use and how to switch before you publish.

Visual controls

Style the selected element with Tailwind CSS visual controls. Edit its class list, choose the screen size and variant you are editing, find controls by section, and use the Tailwind 4 controls for opacity, container queries, inset shadows and 3D transforms.

Class Tree inspector

Edit all Tailwind CSS classes of the selected element and its parents in a tree grouped by variant. Add classes by typing, preview values on hover, type arbitrary values, manage variants and edit the classes of styles.

Styles

Group Tailwind CSS classes into named styles, assign them to elements and change them in one place. Use component styles that compile into CSS rules, or class styles that set classes on the elements, and manage both in the Style manager.

CSS styling with Component Styles

Use Tailwind CSS classes and Pinegrow’s Tailwind tools to write regular selector-based CSS. Component styles compile into CSS rules such as h1 or .card, so the HTML keeps only its selectors.

Match visual controls to a custom theme

Make the Tailwind visual controls and the Class Tree offer your own colors, fonts, font sizes, radii, shadows and breakpoints. With the Design panel this happens automatically; with an external Tailwind CSS 4 build, Pinegrow reads the @theme variables of your source stylesheet.

Design panel and the built-in compiler

Activate the Design panel to compile your Tailwind CSS project into one stylesheet, tailwind_theme/tailwind.css, with Pinegrow’s built-in Tailwind CSS 4 compiler. Set colors, fonts and backgrounds, save design variations, and add your own @theme configuration.

Floating Tools

Apply Tailwind CSS text, background and alignment classes from a palette that floats over the page. Set classes on the selected elements, or pick up a tool and paint it onto one element after another.

Tailwind Blocks

Build Tailwind CSS pages from hundreds of ready-made blocks and start projects from website templates. The blocks work in Tailwind CSS 4 and 3 projects and are converted to Tailwind CSS 4 when you insert them into a Tailwind CSS 4 page.

Component libraries

Open ready-made Tailwind CSS component libraries, such as Tailwind Blocks and Flowbite, from the + Insert button and drag their components onto your page. Add your own pages and projects as libraries too.

Use an external Tailwind CSS build

Compile Tailwind CSS 4 with your own build, for example the Tailwind CLI, while you edit in Pinegrow Desktop. Pinegrow writes the classes you use to _pginfo/used-classes.html, your build compiles them, and Pinegrow reloads the stylesheet.

Helpers

Tailwind CSS helpers in Pinegrow. Swap one colour for another across an element and its children, remove Tailwind classes, jump from a class to its visual control, and copy or move classes between elements and variants.

TailwindUI

TailwindUI is a premium Tailwind component library created by authors of TailwindCSS. Tailwind Visual Editor adds the TailwindUI library into the Library panel and extends visual controls with Tailwind UI extensions.

Upgrade a project from Tailwind CSS 3 to 4

Convert the Tailwind CSS 3 classes in a page or a whole project to Tailwind CSS 4 with Convert Tailwind 3 to 4, switch the built-in compiler to 4.2.2, and know what you still have to change by hand.

Working with Tailwind CSS 3

What is different for projects that stay on Tailwind CSS 3 – the starting page, the built-in 3.4.3 compiler and its JSON configuration, an external build with tailwind.config.js, and customized visual controls.

Tailwind CSS questions and answers

Short answers about Tailwind CSS in Pinegrow, with links to the details. Tailwind 4 or 3, sites with no external requests, CDN prototypes, compiled CSS, custom themes, plugins, upgrades, npm builds, Pinegrow Online, WordPress and Tailwind Blocks.

Tutorials

Tutorials and videos for the Tailwind Visual Editor, from the Pine Adventures playground project with its guided tour to step-by-step landing page and WordPress theme tutorials.



Last updated on October 24, 2026 at 8:09 pm


Print this article