Forgive my ignorance, but I have a question about the dev setup for Tailwind CSS (v3). I have a project with Tailwind CSS but I was looking for the tailwind.config.js file to add some custom code but I realised its not present. I found a tutorial for a manual install of Tailwind here>
In my current project the usual Tailwind classes are present. Would I need to preform a manual install of Tailwind and the relevant node modules to customise it further? I have already added my custom colours via the visual ‘Colors’ window in Pinegrow. I would like to now customise the font sizes with rem but I can’t manage that without doing so with the tailwind.config.js file. Or else I am writing SASS with custom classes.
Any help would be appreciated. Thank you!
Pinegrow let’s you use their built in compiler, where you have no real control over the Tailwind config, or an external compiler.
Here is a video I made a while ago showing you how to configure and use it.
Pinegrow’s External Build Process for Tailwind CSS
1 Like
Welcome to the community!
- Pinegrow Design Panel → tailwind.config.js (theme customization)
- tailwind.config.js → Pinegrow Props Panel (visual controls customization)
With tailwind v2.x, both (1) and (2) works
With tailwind v3.x, only (1) works. For (2), JIT compiler turned out to be a blocker, and solutioning is underway by the PG team.
Oh lovely thank you so much I will give it a watch. Very fascinating software. I nearly installed Tailwind as I do for any dev project manually but thought that would be defeating the point of Pinegrow’s integration.
So I have learned as I have navigated through it. Thank you for the confirmation. Just had to be certain.
1 Like
Hello @adamslowe
So, in order to have styled blocks inside the WordPress editor, I should switch back to the internal JIT compiler from time to time to update the file ‘tailwind_for_wp_editor.css’. Should this file update automatically once I switch back to the internal compiler? I did target this file under ‘Blocks Editor Stylesheet’ in the WordPress page settings, but there is no styling in the wordpress block editor. How do I get the PG to compile this file with what I have already built in PG with the external build? Any ideas?
By the way, external build is an awesome option because it lets us use Tailwind component libraries such as daisyui.com or preline.co with tons of working interactive components (menus, accordions, carousels, etc.) that are highly customizable inside PG with native Tailwind classes. I can’t say how much time they could save. For me, that’s the real advantage of using any CSS framework
Thanks!
1 Like
It’s always worked for me to switch to the internal compiler, do a save (which should generate the editor stylesheet), then switch back to my external build process. There has to be a better way, though. Maybe @matjaz can offer a suggestion or provide insight into what happens behind the scenes to create that stylesheet?
BTW, I fully expect this question to take a while to get answered since I’m sure everyone at Pinegrow is bombarded with questions about today’s Vue Designer launch.
1 Like
@adamslowe @red-rosefields the proper solution with the external process would be to somehow build two TW CSS files, and have the editor one use different, more minimal source directives. But, no idea if TW supports something like this, in the same project. My guess is, no.
Another way would be to add some comment markers in the source file and then run an external script that would strip the marked sections out and replace them with some block editor specific code, and save that as the editor CSS file. That’s how PG does it internally. Again, not so straightforward.
2 Likes
Unfortunately this is not working for me. I switch back to internal compiler, save and export but no css in the editor stylesheet is been generated…
Is this a new feature that maybe helps make this process easier? I am new… So wondering if this woulld allow us to use the primary PG Compiler and then add on extra .json type special style sheets from other sources?
Not really. That screen has nothing to do with Tailwind. It’s just the screen that lets you manage your CSS files and attach or detach them from your HTML documents.
