Pinegrow Pro - Tailwind UI built with NPM - problem

Hi all,

I have been trying to follow this tutorial:

But there is a problem, it seems that there are 2 ways to generate the build process, via npm or standalone executable.

For the stand-alone executable, the Pinegrow team shows this command
./tailwindcss --input source.css --output tailwind.css --content “*.html” --watch

But for the npm built, they do not show a command apart from “npm build” in this tutorial:

I have been for hours on this and cannot work out the right command to type so Pinegrow detect Tailwind UI and export the code in the public/build folder.

Any idea please?

Thanks

Hi @Bennyboy,
So for using the npm tutorial you are using postcss alongside the Tailwind CSS compiler. Within the ‘package.json’ config file you have a “build” command.

"build": "postcss tailwind.source.css -o public/build/tailwind.css"

That build command runs when you execute the npm run build command. In this case, when you execute the command in the base folder of your project, it will look for ‘tailwind.source.css’ in that same directory and then compile it to the public/build directory.

One thing that you can add to your config file is a ‘content’ field. This will make it behave more like the stand-alone for removing unused classes. The content field uses globs, but you should try to make it as specific as possible. So, if your HTML pages are all in the root folder you could add a line to your ‘config.json’ file:

content: ["./*.html"],

If you only have one page it is better to specify it.

content: ["./index.html"]

Here is a link for learning about globs: A Beginner's Guide: Glob Patterns | Malik Browne
Hope this helps,
Bob

1 Like

Hi Bob, thank you so much!
I will try this tonight.