Tailwind external build and exporting files to a theme

Hi,

Upon setting up external compiler for Tailwind, some new files are added to the project, e.g., package.json, postcss.config.js, tailwind.config.js, source.css, etc.

These files and folders are marked as being exported to the WordPress theme, but should they all be? If not, which files should be left only for the project, and not exported to the theme?

Additionally, if I only use classic themes, no blocks whatsoever, should I care about switching to Tailwind internal compiler, e.g., to refresh tailwind_for_wp_editor.css file (or any other file)?

Thanks

1 Like

Those three files package.json, postcss.config.js, tailwind.config.js are part of the node/build setup and are pretty much used to generate the css output. I would simply export only source.css. Btw, shouldn’t that be tailwind.css and not source.css, as per pinegrow tailwind docs?

If you go external compiler, it’s best to stick with it. When switching from external to internal compiler, obviously, those extra features like @apply, any customization to tailwind config, tailwind plugins etc will be lost.

tailwind.css is the build output file, so I guess only this file should be exported to the final theme, not the source.css.

I asked about this, because this is suggested approach as per for example this guide (cf. sections " Files Created by Pinegrow’s WordPress Module" and " WordPress Block Editor Stylesheet").

FYI: The guides on Pinegrow’s site can sometimes be a little confusing (at least they were for me) since they covered two different versions, and they differ slightly from the Tailwind docs. Here is a video I made showing the process and explaining the different files that get generated.

@adamslowe, thanks, I followed this guide when I was setting up external build for Tailwind, sure.
But I couldn’t find specific info on what to export and what to leave only in the Pinegrow source project on building up the theme.

In your case, with just the theme and no blocks, all you need to copy is the tailwind.css file. None of the other files are necessary for WordPress; they are all just there to support the other pieces that generate your final CSS file.

1 Like

Great, thanks @adamslowe.

2 Likes

Are there plans to have a PG internal TW compiler that’s more configurable like the external one, or is this the choice we’ll always have to make depending on our project needs?

I’ve looked up so much stuff in the last few days that I don’t remember if I saw this answered or not. Plus, I’m not even using TW at the moment, so it’s not something I’m looking too deeply into yet, but I like to know the options and limitations for future reference.

1 Like

Yes, the next update will have more configurable internal compiler as well as some other significant TW improvements.

7 Likes

These are excellent news!

1 Like

Thanks, I can’t wait to start playing around with it!

1 Like