Tailwind automatic build for external builder or rename tailwind_theme/tailwind.css

Feature Request
1

Hello,

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

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

2

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

3

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 :frowning:

4

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

1 Like
5

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

  • 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

6

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

7

@RobM can you just use the official command:

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 :

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

tailwind.input.css :

@tailwind base;
@tailwind components;
@tailwind utilities;

index.html

<!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 :confused: 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

8

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
image932×964 54.6 KB

I don’t have any problem with updates not showing up with my watch command.
What does your directory structure look like?
Thanks,
Bob

9

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 :wink:

"_pginfo/used-classes.html"

or

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

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!

1 Like