Skip to content
pinegrow.com
Docs menuTailwind CSS
Tailwind CSS

What’s new in the Tailwind Visual Editor

Updated

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.

On this page

Changes to the Tailwind Visual Editor in each Pinegrow release, newest first. Each release links to its full release notes. For all releases, see the release notes.

Pinegrow 10.1

Released on October 13, 2026. Release notes

  • Pine Adventures playground project. Learn the Tailwind Visual Editor on an example website styled with Tailwind CSS 4, with a guided tour in the Info panel. Open it from the start screen's Getting started tab or Help › Getting started guide… in Pinegrow Desktop. See Tutorials.

Pinegrow 10

Released on October 1, 2026. Release notes

  • Choose the framework of AI-generated projects. Before the AI Assistant creates a new website, choose Tailwind CSS 4, Bootstrap 5 or plain HTML and CSS. Pinegrow creates the matching starter project, tells the AI to use that framework and activates the matching visual styling tools. See Choose the framework for AI-generated projects.

Pinegrow 9.3

Released on June 18, 2026. Release notes

  • Tailwind CSS in the WordPress block editor. New WordPress theme projects add tailwind_theme/tailwind_for_wp_editor.css to the Blocks editor stylesheets when the Tailwind CSS Design panel is active with the built-in compiler, so the block editor looks closer to the exported theme.

Pinegrow 9.2

Released on April 30, 2026. Release notes

  • Compiler update. The built-in Tailwind CSS compiler was updated.

Pinegrow 9.1

Released on March 30, 2026. Release notes

  • Create with AI. Start a new Tailwind CSS 4 project from the start screen: describe what you want to build, attach reference images or sketches, and the AI Assistant creates the first version. Requires an AI Assistant provider.
  • Fixes for loading Tailwind CSS.

Pinegrow 9

Released on January 20, 2026. Release notes

  • Hide the default palette. Hide Tailwind's default colors in the Colors control to focus on your custom palette.
  • Class tracking in scripts. Tailwind class detection also scans inline scripts, for classes that JavaScript adds to the page.
  • Class styles validation. Clearer warnings for styles, and better handling of component styles.
  • Smart mode. The Smart mode workspace has dedicated Tailwind panels, including the Class inspector.

Pinegrow 8.6

Released on October 28, 2025. Release notes

  • Convert Tailwind 3 to Tailwind 4. Pinegrow detects Tailwind CSS 3 code in Tailwind CSS 4 projects and converts inserted blocks automatically. When you create a new page in a Tailwind CSS 4 project, Pinegrow offers to upgrade Tailwind CSS 3 code to Tailwind CSS 4. The Convert Tailwind 3 to 4… menu is always available. See Upgrade a project from Tailwind CSS 3 to 4.
  • Tables. Insert and edit tables, with starter styling for Tailwind CSS.
  • Workspaces. Workspaces optimized for Tailwind CSS, Bootstrap and plain CSS.

Pinegrow 8.5

Released on May 15, 2025. Release notes

  • Bug fixes, especially for Tailwind CSS 4.

Pinegrow 8.4

Released on March 13, 2025. Release notes

  • Tailwind CSS 4. Pinegrow 8.4 brings full support for Tailwind CSS 4, including a built-in Tailwind CSS 4 compiler.

Pinegrow 8

Released on June 26, 2024. Release notes

Pinegrow 8 brings a new approach to classic CSS styling with Tailwind and a number of improvements to the visual tools.

CSS styling with Component Styles

Tailwind can be used for regular selector-based CSS styling, without utility classes in the HTML.

You use Pinegrow's Tailwind tools, including the CSS Grid editor, to define component styles that compile into regular CSS rules. Instead of a set of utility classes on every <h1> element, you add the classes to a component style with the selector h1. You can even add styling for sub-elements such as <small>. Such styles are self-contained and managed in the new Style manager.

Under the hood, Pinegrow uses Tailwind to compile the styles into normal selector-based CSS rules. The existing CSS styling tools, including SASS, remain core features of all Pinegrow editions.

Learn more about component styles.

CSS Grid editor

Pinegrow's visual CSS Grid editor now works with Tailwind CSS. All grid features are supported, including custom layouts, named areas and named lines.

To create or edit a grid, select the element and choose CSS Grid › Edit grid… from the selected element menu, or press CMD+G.

Learn more about Pinegrow's CSS Grid editor.

Class tree inspector improvements

  • Use CTRL (CMD on Mac) + click to select several classes.
  • Right-click for copy, move to variant, move to parent and other options.
  • Right-click any class to toggle its !important flag.

New Style manager

Pinegrow now supports two types of styles:

  • Component styles compile into regular CSS rules that target HTML elements with selectors. For example, the style h1 affects all <h1> elements. Use component styles when you don't fully control the HTML output, or when you want pure CSS styling with the convenience of Tailwind.
  • Class styles set classes directly on HTML elements. Use class styles if you prefer to keep all classes on the HTML elements.

All styles can now be edited directly in the Style manager (the Class styles panel in previous versions). The manager uses the same tree editor as the Class tree inspector. To change a property, click it and select a new value.

Component styles can be reordered with drag and drop. Use instant search to find properties.

Swap colors on an individual style (right-click the style or variant) or globally.

All Class tree inspector improvements mentioned above are also available in the Style manager.

See Styles.

Custom configuration for the built-in Tailwind compiler

Set custom screen sizes, spacing and other theme values in the compiler options of the Design panel. You no longer need an external build process just to change screen sizes and similar settings.

Extended variants support

The variant selector lists all available variants and lets you edit custom variants, such as variants that target sub-elements by their selectors.

Toggle the !important flag on classes

Tailwind classes can be prefixed with ! to add !important to their CSS. This makes sure that the class overrides inline styles or CSS rules with higher specificity.

Use the ! icon next to fields in the Visual controls to toggle the !important flag. In the Class tree inspector and in the Style manager, right-click a class to toggle it.

Flowbite Blocks integration

Flowbite Blocks are integrated into the Library panel. Browse the blocks library and drag components directly to the page. To use the Pro blocks, buy the license directly from Flowbite and log in on the Flowbite page in the Library panel.