Tailwind CSS questions and answers

Short answers to the questions people ask most about Tailwind CSS in Pinegrow. Each answer links to the page with the details.

Does Pinegrow support Tailwind CSS 4 or 3?

Both. New projects use Tailwind CSS 4, and the built-in compiler uses Tailwind CSS 4.2.2. Tailwind CSS 3 pages work too, with a Tailwind CSS 3 template and a built-in Tailwind CSS 3.4.3 compiler. See Tailwind CSS versions, compiling and offline use and Working with Tailwind CSS 3.

Can my site run with no external requests, or offline?

Yes. Compile the stylesheet into your project with the built-in compiler (activate the Design panel) or with your own build. Your pages then link tailwind_theme/tailwind.css and don't load Tailwind from any server. Fonts and images can still come from other servers, for example Google Fonts chosen in the Design panel. What can still load files from other servers lists them and the local alternatives.

Can I prototype with the Tailwind CDN?

Yes. Uncheck Activate the Design panel when you create the project, and the page keeps the Tailwind CSS 4 browser script from unpkg.com. The script needs an internet connection and builds the CSS in every visitor's browser, so switch to a compiled stylesheet before you publish. See Switch from the CDN script to a compiled stylesheet.

Where is my compiled CSS?

With the built-in compiler, in tailwind_theme/tailwind.css in the project folder. Pinegrow updates it while you edit and writes it when you save. Publish the tailwind_theme folder with your pages. With an external build, the CSS is wherever your build writes it.

Can I use my own theme, colors and fonts?

Yes. Set the project's colors and fonts in the Design panel. For other theme values, click Compiler & custom config… in the Design panel and add @theme variables to Custom configuration; Add config settings… inserts examples such as screen sizes, dark mode and font sizes. For your own CSS rules, select a file in CSS file with additional rules. See Design panel and the built-in compiler and Match visual controls to a custom theme.

Which Tailwind plugins are included? Can I add DaisyUI or Flowbite?

The built-in compiler includes the official typography plugin (the prose classes) and forms plugin, and it can't load any other plugin: compiling stops with an error if the configuration asks for one. For DaisyUI, Flowbite or other plugins, compile with your own build process in Pinegrow Desktop. See Use an external Tailwind CSS build.

How do I upgrade a Tailwind CSS 3 project to 4?

Click the Project settings panel tab and choose Tailwind CSS › Convert Tailwind 3 to 4… to convert the classes of the selected page or the whole project. Converting the whole project saves the files and can't be undone, so back up the project first. See Upgrade a project from Tailwind CSS 3 to 4.

Can I use my npm or Tailwind CLI build?

Yes, in Pinegrow Desktop. Your build compiles the CSS, and Pinegrow edits the pages and writes the classes it finds to _pginfo/used-classes.html for your build to include. Pinegrow doesn't run the build, so keep it running in watch mode. See Use an external Tailwind CSS build.

Does it work in Pinegrow Online?

Yes. Pinegrow Online has the same Tailwind features as Pinegrow Desktop, including the Design panel and the built-in compiler. Only the external build process needs Pinegrow Desktop.

Does it work with the WordPress theme builder?

Yes, you can build WordPress themes from Tailwind pages with WordPress Builder. With the built-in Tailwind CSS 3 compiler, the Design panel also writes tailwind_theme/tailwind_for_wp_editor.css, a version of the stylesheet without the browser style reset, for the block editor. WordPress Builder suggests it when you set tailwind_theme/tailwind.css as the editor stylesheet in the theme settings.

Why does a class have no effect?

Check these in order:

The page links the stylesheet: with the built-in compiler, the page needs the link to tailwind_theme/tailwind.css. Open and save pages you haven't opened since you activated the Design panel.
The class exists in your Tailwind version: some Tailwind CSS 3 classes were renamed in Tailwind CSS 4. Convert the page with Convert Tailwind 3 to 4….
Pinegrow knows the class: if you added classes in another editor, choose Tailwind CSS › Refresh used classes in the Project settings menu so the compiler includes them.
With the CDN script, the page view needs an internet connection and JavaScript enabled. With an external build, your build must be running.

Do Tailwind Blocks work with Tailwind CSS 4?

Yes. Tailwind Blocks are written in Tailwind CSS 3, and Pinegrow converts them to Tailwind CSS 4 when you insert them into a Tailwind CSS 4 page. The conversion is on by default (Auto convert inserted code in Convert Tailwind 3 to 4…). See Tailwind Blocks.

How do I know which Tailwind version Pinegrow uses for a page?

Select any element and look at the Tailwind CSS options section at the end of the Visual controls panel, which says, for example, Tailwind CSS 4.0 properties are shown for the current page. If it's wrong, change Tailwind CSS version there, or the compiler in Compiler & custom config… when the Design panel is active. See How Pinegrow decides the Tailwind version.