How To: Recover from Enabling Sass preprocessing in Tailwind (or any other)

Hi fellow Pinegrow people,

I am using the latest version of Pinegrow + Tailwind and have set up a project according to your very clearly written tutorial on the blog:

For anyone who at some point, using this setup or not, has a failure in their live view because somehow the Sass Preprocessor that you tried to enable (… I know you don’t need it for Tailwind but here me out) through Pinegrow showed you the error: ‘stylehseet is locked’ and in my case deleted all the content in tailwind.css file, in which PostCSS generates all the styles.

Now the catch is simple; in this case tailwind.css is overwritten by a .scss file that simply has no content in my case, so it will overwrite all the styles in the build-file. But since it’s done after PostCSS generates the styles, they will continously be erased because of Pinegrow’s live functionality with Sass, and it will erase the styles once again because it happens after PostCSS.

For many users I can say this; Pinegrow helps you with a lot of things but sometimes it will backfire on you. And when it does it really helps if you know how things work under the hood, such as with preprocessors and post processors; they often have JSON files in which they store their settings.

So does Pinegrow and it’s good to know how it can help you out in a time of need, such as when your tailwind project fails and why that happens. And that’s why I wrote this little tutorial for you; so other pines like me can grow… :wastebasket: <-- :face_vomiting: here

No I wrote this because it really sucks to be stuck as a “no-coder” and the panic strikes because you need to push a deadline, and you really need to get out quick. So that’s why I hope someone in the future reads this and takes a breath first, looking for the logical answer and not the magical one.

So simply open your pinegrow.json file that is stored in your project folder, and open it up in your code editor of choice, or even inside Pinegrow since it’s a one-time operation; this is what it looks like

It’s nothing scary, just a bunch of categories with lists and elements to fill those lists. If you want, just create a backup file called pinegrow–backup.json, copy over the current settings and alter the original (it’s ok, backed up now) to make it work again. The part you want to be looking at is "frameworks"

What matters is the order and you should not touch that. What you are looking for is where the .scss file is referenced and the parts that containing “pg..” which are the plugins it needs. Delete these parts, save it, and re-open the whole project to see if it will now load normally without any of the weird behaviour web-tech can have for those unaware of the order of presedence.

If enabling the scss/Sass compiler from the Pinegrow editor is causing you trouble, this is where you should look because in this file that functionality is still enabled, even when it fails; this will load on boot so this is where the solution lies to stop it from loading the problem.

And that’s how you can reverse the effects it has on your editor environment, or workspace for that matter. Because the silly thing I realized is that The compiler did it’s job perfectly but the .scss file was simply empty and breaking all the styling.

That’s good, really, it supposed to ruin all the styling and break. Otherwise if it didn’t, I would never know when it would work otherwise. Pinegrow did it’s job perfectly because otherwise I couldn’t figure out in the first place what went wrong. Funny right? That hypocrite reality of problem/solution…

So with a little help you can even dig really deep into how the interface will help you and assist you what you otherwise need to do in code. But getting your feet wet and paddling the waters of code editing is not all that scary, it’s actually quite logical if you get how it works.

ps, I hope that the people from Pinegrow can help you clarify anything related to showing all the steps if you need more of an in-depth tutorial or alike, but in general if you are working with Pinegrow and the interface is throwing you lemons, this is how you can enable/disable certain features your workspace requires, and how to recover from a failed boot.