Tailwind CSS v3 setup

Styling (CSS)
#1

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!

#2

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
#3

Welcome to the community!

  1. Pinegrow Design Panel → tailwind.config.js (theme customization)
  2. 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.

#4

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.

#5

So I have learned as I have navigated through it. Thank you for the confirmation. Just had to be certain.

1 Like