Pinegrow Web Editor

What's new in this version:

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.

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.

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.

Fixed:
- This release includes a number of bug fixes, addressing issues reported by users and improving the overall stability and performance of Pinegrow Web Editor