Keep up to date with improvements of Tailwind Visual Editor.
Pinegrow 8
Released on 26.6.2024
Pinegrow 8 brings a fresh new approach to classic CSS styling with Tailwind and a bunch of significant improvements to visual tools.
CSS Styling with Component Styles
Tailwind can be used to do regular selector-based CSS styling, without utility classes in HTML.
The benefit is that you get to use all greatly improved Tailwind tools in Pinegrow (including the CSS grid editor!) to define smart component styles that automatically compile into regular CSS rules.
Instead of having a bunch of utility classes on every <h1> element, you add these classes to the component style with the selector h1. You can even add styling for sub-elements such as <small>. Such styles are self-contained and easy to manage through the new Style manager.
Under the hood, Pinegrow uses Tailwind to compile styles into normal selector-based CSS rules.
We are big fans of this new Tailwind-assisted approach to pure CSS styling. Therefore we believe that many of our users will enjoy it as well (that said, the existing CSS styling tools including SASS remain core features of all Pinegrow editions).
Check out the Tailwind Bunny tutorial and learn more about component styles.
CSS Grid editor
Pinegrow’s powerful 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 select CSS Grid -> Edit grid… from the selected element menu (or use CMD+G shortcut).
See the Grid editor in action in Wave McSplash Tailwind CSS Grid tutorial.
Learn more about Pinegrow’s CSS grid editor.
Class tree inspector improvements
Use CTRL (CMD on Mac) + Click to select multiple classes.
Right-click for copy, move to variant, move to parent and other options.
Right-click on any class to toggle its !important flag.
Brand 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 style h1 will affect all <h1> elements. Use Component styles when you do not fully control the HTML output or you wish to do pure CSS styling with the convenience of Tailwind. Learn more about CSS styling with component styles.
Class styles set classes directly on HTML elements. Class styles are directly added or removed from individual HTML elements. Use Class styles if you prefer to keep all classes directly on HTML elements.
All styles can now be edited directly from the Style manager (Class styles panel in previous versions). The manager uses the same tree editor as the Class tree inspector. To change any property, just click on it and select a new value.
Component styles can be reordered with drag and drop. Use instant search to find relevant properties.
Swap colors on individual style (right-click on the style or variant) or globally.
All Class tree inspector improvements mentioned above are also available in the Style manager.
Custom configuration for the built-in Tailwind compiler
Set custom screen sizes, spacings and other theme values in the Compiler options dialog in the Design panel. This removes the need to use external build process if you just need to tweak screen sizes and other similar settings.
Extended variants support
The variant selector now lists all available variants and lets you edit custom variants, such as targeting sub-elements by their selectors.
Toggle !important flag on classes
Tailwind classes can be prefixed by ! to add !important to their CSS statements. This is useful in cases where we need to make sure that the class overrides any inline styles or high-specificity CSS rules.
Use the ! icon next to fields in Visual controls to toggle the !important flag.
In the Class tree inspector and in the Style manager right click on any class to toggle its !important flag.
Flowbite Blocks integration
Flowbite Blocks are integrated into the Library panel. Navigate the blocks library and drag components directly to the page. Note, to access the Pro blocks you need to purchase the license directly from Flow bite and then login in the Flowbite page in the Library panel.
Tutorials
Wave McSplash – Building CSS Grid with visual editor
An interactive tutorial on using visual CSS grid editor with Tailwind CSS. The tutorial opens in Pinegrow Online.
Bunny – CSS styling with Component styles
An interactive tutorial on Component styles that compile into selector-based CSS rules. The tutorial opens in Pinegrow Online.
