Skip to content
pinegrow.com
Docs menuTailwind CSS
Tailwind CSS

Activate the Tailwind extension

Updated

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.

On this page

The Tailwind Visual Editor shows the Tailwind controls for the pages it's active on. In most cases you don't have to do anything: Pinegrow activates it when you open a Tailwind page.

To start a Tailwind project, see Create or open a Tailwind CSS project. For the Tailwind versions Pinegrow supports and how pages get their CSS, see Tailwind CSS versions, compiling and offline use.

When it's activated automatically

The first time you open a page, Pinegrow activates the Tailwind Visual Editor if the page:

  • loads the Tailwind CSS 4 browser script (@tailwindcss/browser@4) or the Tailwind CSS 3 CDN script (cdn.tailwindcss.com), or
  • links a stylesheet with tailwind in its address, for example tailwind_theme/tailwind.css, which the built-in compiler creates.

When you save the page, Pinegrow remembers which libraries and plugins are active on it. From then on it uses that list instead of detecting them again.

Check that it's active

Select any element on the page and look at the Visual controls panel. When the Tailwind Visual Editor is active, you see the Tailwind controls and the Tailwind CSS options section. It names the Tailwind version Pinegrow uses for the page, for example Tailwind CSS 4.0 properties are shown for the current page.

The Visual controls panel (Properties for a) for a link on a Tailwind page: the Tailwind classes at the top, the size tabs and section icons, a few Tailwind controls, and at the end the Tailwind CSS options section saying Tailwind CSS 4.0 properties are shown for the current page.
When the extension is active, the Visual controls panel shows the Tailwind controls and the Tailwind version of the page.

If the version is wrong, see How Pinegrow decides the Tailwind version.

Activate it by hand

Pinegrow doesn't detect Tailwind when your compiled stylesheet has a name without tailwind, such as output.css or style.css, or when the page was saved in Pinegrow before it used Tailwind. Activate it like this:

  1. Open the page.
  2. Click the Project settings icon in the left bar and choose Libraries & plugins…. In Flexible UI mode the Page menu also has Manage libraries & plugins….
  3. In the Libraries & Plugins Manager, find Tailwind CSS and click Activate.
  4. Save the page.
The Libraries & Plugins Manager for index.html, scrolled to the middle of its list. Tailwind CSS is listed with its Activate link, between Materialize 1.0.0 and Interactions; SVG Library is the only active entry, with a check mark and Deactivate.
Click Activate next to Tailwind CSS to turn the Tailwind Visual Editor on for the page.

When a project is open, Pinegrow activates the extension on all open pages of the project. A page can use only one Tailwind library at a time; if another one is active, deactivate it first.

To turn the extension off for a page, click Deactivate in the same list.

If Tailwind CSS isn't in the list

The Tailwind Visual Editor is an add-on to Pinegrow Desktop. It's included in the free trial; after the trial, your license must include the Tailwind Visual Editor add-on. Without it, Pinegrow doesn't load the Tailwind controls, and Tailwind CSS isn't in the Libraries & Plugins Manager.