Tailwind CSS 4 – AI Assistant improvements – Bug fixes
This release focuses on major improvements to the Tailwind CSS integration, and enhancements to the AI assistant. A number of bugs were also fixed.
Download Pinegrow 8.4
The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.
Pinegrow for Mac (Intel) Antivírus checkedMac: 13d31d1682d9b7a889c8637e32aa83af06fd7beb
Pinegrow for Mac (Apple Silicon) Antivírus checkedMac: 164a9fb43522ffbff40fc9908a450c8e7dbadbed
Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: 7f46a5809744c956b141f3442547902c7cd8bafb
Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 5c2179cbb200a0410d1381f122fa0159dbcff55b
Pinegrow Online and Pinegrow WordPress Plugin will be updated soon.
Watch the video
This video covers all new features and provides useful tips on upgrading Tailwind and using AI Assistant.
Tailwind CSS 4 Integration
Pinegrow now fully supports Tailwind CSS 4, the latest version of the popular utility-first CSS framework. This update brings a number of changes and improvements to how you work with Tailwind in Pinegrow.
Tailwind Visual Editor add-on is required to the Tailwind CSS features.
Starting a new project
When creating new projects, select “Tailwind CSS” from the framework menu and choose between version 4.x or 3.x from the available templates.
Version detection
Automatic Version Detection: Pinegrow automatically detects the correct version of Tailwind CSS used in existing projects.
Manual Version Override: If needed, the Tailwind CSS version can be manually changed in the Properties panel under the “Tailwind CSS Options” section. Pinegrow’s auto-detection has proven very accurate in testing.
Arbitrary control values
Tailwind CSS 4 introduces broader support for arbitrary values, allowing for more fine-grained control over styling. Pinegrow now fully supports this:
Expanded Property Controls: Property controls (for example, those controlling padding, spacing, width, and height) now offer a significantly expanded range of options in the dropdown menus. This reflects the expanded possibilities within Tailwind CSS 4.
Direct Input: Use Class Tree inspector to input arbitrary values, instead of only relying on predefined Tailwind utility classes.
Combined Color and Opacity
A significant change in Tailwind CSS v4 is the way color and opacity are handled. Tailwind CSS 4 uses a combined notation for specifying both color and opacity, such as bg-red-400/50 (a red background with 50% opacity). Separate opacity classes (e.g., opacity-50) are no longer the standard way to apply transparency.
Simplified Visual Controls: Pinegrow’s visual controls provide a color selector, along with a dedicated opacity selector.
Class Tree Inspector: All color classes have an Opacity sub-menu for quick transparency selection.
Improved Pseudo-Class Variant Management
Tailwind CSS offers a wide array of pseudo-class variants (e.g., :hover, :focus, :first-child, and many more). Pinegrow’s “Pseudo class” selector in the Properties panel has been redesigned to provide a more organized and efficient workflow:
Organized Sub-Menus: Pseudo-class variants are now organized into logical sub-menus (e.g., “All variants”, “Frequently used”, “Aria”, etc.). This reduces clutter and makes it easier to find the specific variant you need.
Support for Value-Based Variants: For pseudo-classes that require a value (such as data-[...], group-[...] or has-[...]), Pinegrow now presents a dialog box prompting you to enter the appropriate value when the variant is selected. No more manual typing of complex variant syntax.
Container Queries: The interface provides full support for Tailwind’s container query variants (like @sm, @lg).
Tailwind CSS 4 and the AI assistant
To ensure the AI assistant can create and edit Tailwind CSS 4 code correctly, a short instruction has been added to the prompt. It describes the main differences with Tailwind CSS 3. This is transparent to the user, but allows language models to generate more accurate Tailwind CSS 4 code.
Selecting the compiler
Pinegrow provides flexible options for compiling Tailwind CSS, and managing custom configurations:
Built-in JIT Compiler (4.0.0): This is the recommended option when using the Design Panel. It offers full support for Tailwind CSS features and is integrated directly into Pinegrow.
External Build Process: This option allows you to use an external Tailwind CSS build process (e.g., a custom Node.js setup). When using an external build process, you must specify the *source* CSS file (typically containing your @tailwind directives). Important: At this time, the legacy mode with tailwind.config.js file is not supported when using an external build process with Tailwind CSS 4 in Pinegrow.
Custom Configuration with the Design Panel
Tailwind CSS 4 uses CSS variables for custom configurations. This replaces the JavaScript-based tailwind.config.js file. Pinegrow now provides a streamlined approach to customization:
The “Custom configuration” section (under “Tailwind CSS Options” in the Design panel) presents a text area where you can manage your custom configurations in Tailwind css format.
The “Add config settings…” button provides helper functions to add settings for common customizations (e.g., screen sizes, border radius, font size, etc.). These helpers insert the correct CSS variable syntax into the configuration area.
You are not limited to only adding settings to the theme, additional CSS rules can also be added.
For example, it is possible to set up the dark mode using the dark class by editing custom configuration.
AI Assistant Updates
Pinegrow’s AI assistant, Mr. Pine Cone, has received a number of significant improvements in this release:
Improved User Interface (UI)
The Action selection (which determines *what* the AI assistant will do – e.g., “Transform selected element,” “Edit the whole page,” etc.) has been moved from the top of the prompt input box to a position next to the New task button.
This grouping makes it more intuitive to first choose the desired action, and then start a New task.
The Follow-up button remains separate. Follow-up is used to modify the existing task without changing its action, whereas New task creates a completely new task, based on the currently selected action.
Expanded AI Model Support
Pinegrow now supports a wider range of AI providers and models, giving you more flexibility and control over the AI’s capabilities.
Supported providers include OpenAI, Anthropic, OpenRouter, Fireworks, and custom OpenAI-compatible endpoints. You will need at least one API key from these providers to use the AI assistant.
New Model: Notably, Anthropic’s Claude 3.7 Sonnet model has been added. In our testing, Claude 3.7 Sonnet has proven to be an exceptional model for web development tasks, often outperforming other options in terms of visual appeal, creativity, and code quality.
Bug Fixes
This release includes a number of bug fixes, addressing issues reported by users and improving the overall stability and performance of Pinegrow Web Editor.
Availability
Pinegrow Web Editor 8.4 is available now. The described features, related to Tailwind CSS and AI assistant, will also be available in Pinegrow Online and in Pinegrow Plugin for WordPress.
Download Pinegrow 8.4
The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.
Pinegrow for Mac (Intel) Antivírus checkedMac: 13d31d1682d9b7a889c8637e32aa83af06fd7beb
Pinegrow for Mac (Apple Silicon) Antivírus checkedMac: 164a9fb43522ffbff40fc9908a450c8e7dbadbed
Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: 7f46a5809744c956b141f3442547902c7cd8bafb
Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 5c2179cbb200a0410d1381f122fa0159dbcff55b