Customising Tailwind

Hi

I have been following this tutorial in the documentation and all has gone well until I get to the part where it says ’ Click on the Tools & Settings icon and select Customize visual controls :’

Rather than seeing the dialog where it should allow me to point to the build stylesheet I instead see a dialog telling me that customisation is not supported in Tailwind Css 3+.

As I’m new to using Pinegrow I am assuming that at this point I should probably be doing something other than what is suggested in the tutorial however I’m not entirely sure what.

Could you enlighten me?

Hi @Dom I’ve spent about 20hrs trying to get Tailwinds working in PG with their Tialwind’s Windows CLI. Never got it to sync properly with PG but I think node.js is working, but I do know you’re looking at old documentation. They are using the design panel to handle colors now. You have to activate the design panel from the Window → Show/Hide in the top navigation of PG if it’s not already active for you.

Also, this new external build may help you a bit too.

1 Like

@jonroc Thank you so much for your suggestion. I have the basic design palette working now. Would I be correct in thinking that allowing Pinegrow to use it’s own compiler removes the ability to abstract some of the css into its own reusable components. Possibly not very well put on my part but I have in mind things like buttons or cards that might be widely reused over a site.

I’m presuming for that I’d need a tailwind config, and that in turn suggests an external build, or could I simply add a tailwind config to the tailwind theme folder that gets created by Pinegrow and use that?

1 Like

or you could use pinegrow components.

Tailwind changed a lot from version 2 to v3, then again with 3.1. A lot of Pinegrow’s tailwind documentation was written for v2 before they added the JIT compiler, and small adjustments need to be made to make them work with v3. If you know tailwind, it’s easy enough to sort out, but trying to learn TW and reinterpret the documentation can be a challenge.

I hope to have time to make a video walking through the whole process, both for public consumption and for my team’s documentation. I just need a few extra hours in the day, and maybe I’ll be able to crank it out :man_shrugging:

Team Pinegrow is bending over backward to get the WP plug-in released sooner than later, along with a ton of new quality-of-life changes (maybe even some new tutorials), so I doubt revisiting older documentation is on their radar at the moment.

Keep using these forums, and don’t hesitate to tag me if you run into specific issues. I’m happy to help whenever I’m able.

4 Likes

Hey @Dom,

PG can create abstracts of reusable code (use the “inline” feature at the top UI under the classes), update colors, and add fonts.

Unfortunately, the only way you can customize Tailwinds beyond that is to run your own compiler. There has been a feature request for PG to add a text area into the settings for their compiler so we can inject our own custom Tailwind configurations (with the exception of adding plugins) you can plus 1 over on that thread if you’d like to let them know you’d also like to add in custom functions/setting that TW offers with the internal compiler.

1 Like