How to Convert Tailwind CSS project to Plain CSS Project?

I started a project with Tailwind CSS, but I noticed that it is an outdated version.

I removed it and add the JIT compiler script, but I can’t use my configured classes and arbitrary value classes in the Element properties panel.

How can I switch to a Plain CSS project?

I don’t fully understand your desire. Do you want to completely abandon Tailwind? All projects in PG (whether using BS or TW) are set to be able to use regular CSS by default. Just create your .css (or .scss) file and classes and work with them by hand coding or using the “style” paintbrush UI as seen below:

No, I don’t want to abandon Tailwind CSS, I want to use the latest version with my own configuration and arbitrary value classes.

I only see the now default classes:

You’ll have to use your own CLI or the Node.js as an external compiler. But I don’t think it will pick up custom classes you add to your tailwind-config.js in the UI dropdowns so you’d have to add the class manually.

Thank you, for your advice.

I doubt it, too. If I only could get rid of Tailwinds default theme classes in the UI.

Ya, I feel your pain. You can create your own plugin for PG based on the official TW plugin. I’ve looked at the bootstrap one and it was too complex for me to wrap my head around to create a custom version of it. If you’re really good a JS ES6 you may have more luck than me.

@jonroc the TW plugin is a monster, would not recommend digging into it :slight_smile:

We do have a prototype solution for picking out the custom TW classes but it will most likely involve having to add some kind of PG plugin into the external Node-based TW compilation process.

@marcelreschke the Pinegrow WordPress Plugin does not support customized TW, not sure if it will be possible in the future.

1 Like