# Tailwind automatic build for external builder or rename tailwind\_theme/tailwind.css

**URL:** <https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344>\
**Category:** Feature Request\
**Created:** [March 3, 2022, 7:29am UTC](https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344 "2022-03-03T07:29:08Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [March 3, 2022, 7:29am UTC](https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344/1 "2022-03-03T07:29:08Z")

</div>

Hello,

Thank you very much for adding the “external builder for Tailwind”

> **[Using the external build process | Pinegrow Web Editor](https://pinegrow.com/docs/tailwind/using-external-build-process/)**
>
> Learn how to use Pinegrow with an external Tailwind CSS compilation process (not with using the built-in compiler).

Without error :  
The triggering of the external script of “builder”, did not automatically as with the “builder JIT”?!?

Do you think you can add automatic build? Similar to “JIT builder” ?  
For example: in the options of the Tailwind builder Pinegrow, add script detection in the package.json file, then offer them in the options, to be able to select one, for it to be activated, automatic build similar to the "JIT builder "

Second request, alternatively; for the “JIT builder”: could you: allow to have a name is a different file path than the default: “tailwind\_theme/tailwind.css”

Thank you, I wish you a pleasant day

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [March 3, 2022, 10:58am UTC](https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344/2 "2022-03-03T10:58:57Z")

</div>

Hi @JoseFR,  
So the external builder is entirely in the control of the user, not Pinegrow. There isn’t a way for Pinegrow to trigger anything. Instead, the user must set it up with another task runner like Grunt.

We can look into changing out the output file. Any suggestions or reasons you don’t like the current location or file name?

Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [March 3, 2022, 12:10pm UTC](https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344/3 "2022-03-03T12:10:04Z")

</div>

It’s very simple @RobM the “JIT builder” compiler is good, but, not possible to configure the output path, and in my case I have complex source codes which must be organized in a /src/ : it is necessary to be able to specify the folder and the file: the full path of the JIT output: you just have to be able to indicate the path

I’m very sad that it’s not possible to configure custom Builder path ☹

---

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [April 2, 2022, 9:47am UTC](https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344/4 "2022-04-02T09:47:12Z")

</div>

It’s safe: the Pinegrow name of the fixed “path” of the “JIT builder”, is a real constraint: you need an option for that…

---

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [April 2, 2022, 9:47am UTC](https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344/5 "2022-04-02T09:47:20Z")

</div>

And @RobM for the “external builder”:  
I’m really having trouble with Pinegrow

> **[Using the external build process | Pinegrow Web Editor](https://pinegrow.com/docs/tailwind/using-external-build-process/)**
>
> Learn how to use Pinegrow with an external Tailwind CSS compilation process (not with using the built-in compiler).

- For example if a CSS class has not been built, the rendering is invisible in Pinegrow: this forces me to save the file, so that the watcher of the external builder builds the CSS
- For example if I apply a Tailwind class with Pinegrow, no rendering because the class is not build. No solution: forced to save the file to see the rendering in Pinegrow

There should be a mechanism that triggers the external builder in Pingrow. Like that of the browsersync reload. The browsersync works very well: if I apply a CSS without saving the page … the browsersync reload works.

Do you have a solution ? Because, I’m trying a mechanism here with your reload proxy browsersync but it’s tedious

Thank you

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [April 2, 2022, 9:58am UTC](https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344/6 "2022-04-02T09:58:06Z")

</div>

Hi @JoseFR,  
Can you describe how you have set you compiler up - just a list of simple steps? Are you using the design panel? The behavior you are describing doesn’t sound right. The external build should detect updates automatically.  
Thanks,  
Bob

---

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [April 2, 2022, 11:28am UTC](https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344/7 "2022-04-02T11:28:58Z")

</div>

@RobM can you just use the official command:

```auto
npm install -g tailwindcss
npx tailwindcss -c tailwind.config.js -i tailwind.input.css -o tailwind.output.css --watch

```

and in Pinegrow

tailwind.config.js :

```auto
module.exports = {
    content: [
        './**/*.html',
    ],
    theme: {},
    corePlugins: {},
    plugins: [],
    safelist: [
    ]
}

```

tailwind.input.css :

```auto
@tailwind base;
@tailwind components;
@tailwind utilities;

```

index.html

```auto
<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="tailwind.output.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="pg-empty-placeholder bg-blue-600"></div>
    </body>     
</html>

```

The test :

1. Run the tailwindcss watch command
2. You change the color bg-blue-600 by bg-red-600 **without saving the page** : the watcher will not launch build because no file saving OK, and problem 😕 no preview of “red” in Pinegrow because the CSS does not exist… (forced to save for view red …) it is a basic example… in the case for example of container layout in page it is more dramatic

Your browsersync works perfectly, when I change the color without saving page is reload, this is the mechanic to use to run the extern builder, same thing with the JIT it works perfectly

yes I use the “design panel”, I am constrained, to be able to specify the external builder,  
yes, in the properties preferences panel, I checked external builder and refresh

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [April 2, 2022, 1:13pm UTC](https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344/8 "2022-04-02T13:13:02Z")

</div>

Hi @JoseFR,  
When you activate the external compiler in the Design Panel, does it add the `const pg_colors = {...}` into your `tailwind.config.js` file? Have you added an `extend` into your theme section in the config file?

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/6453ed54a18ea57051d8faae78ef84864cf573f7.png)  
I don’t have any problem with updates not showing up with my watch command.  
What does your directory structure look like?  
Thanks,  
Bob

---

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [April 3, 2022, 6:56am UTC](https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344/9 "2022-04-03T06:56:35Z")

</div>

Thank you very much for your help @RobM

it’s fixed now : my problem was simple, I misread doc and misconfigured my “content” for the build watch

When using the External Builder, one must wtach the “\_pginfo/used-classes.html”  
And congratulations @matjaz for this idea, very ingenious 😉

```auto
"_pginfo/used-classes.html"

```

or

```auto
tailwindcss --input source.css --output tailwind.css --content _pginfo/used-classes.html --watch

```

---

<div class="post-metadata">

**Author:** ![PwrSrg](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pwrsrg/32/4316_2.png) [@PwrSrg](https://forum.pinegrow.com/u/PwrSrg)\
**Post date:** [August 3, 2023, 9:32pm UTC](https://forum.pinegrow.com/t/tailwind-automatic-build-for-external-builder-or-rename-tailwind-theme-tailwind-css/6344/10 "2023-08-03T21:32:20Z")

</div>

Any update on defining a custom path for the built-in JIT compiler?

As convenient as it is, “`/tailwind_theme/tailwind.css`” is just plain awful. Also, an option to **minify** the output would be greatly appreciated. My ideal output path would be “`/css/main.tw.min.css`”.

Thanks!