CRA 4 & Tailwind-CLI w/ TW v3 & Postcss 8

[ryanburns23]

Our current application is running on CRA 4 which depends on postcss 7.

We have a workflow where the tailwind cli (tw cli) builds just our apps tailwind css with tw v3 and postcss 8. We then import this generated css file into our react app as normal.

This works fine until recently when tailwind changed how empty vars are defined. Summarized here:
#2889 (comment) and then changed here f2d73b8, #6926

Basically... They removed the /*!*/ /*!*/; definition and now use ; for default css vars. The kicker here is only postcss 8 support this empty definition it appears per this comment: postcss/postcss#1404 (comment)

Our issue only arrises on build, when the generated tailwind css file is processed through CRA 4's config. The build process strips the new empty css var syntax from our tw cli generated css file. This happens because CRA 4 relies on postcss 7.

To resolve this we have a script that run after the tw cli generates our CSS and adds the old syntax for default css vars: /*!*/ /*!*/.
Something like: src('./src/styles/tailwind.dist.css').pipe(replace(': ;', ':/*!*/ /*!*/;')).pipe(dest('./src/styles/'))

We plan to remove this build step when we upgrade our whole app to CRA 5 which supports postcss 8 out of the box.

Posted this here in case anyone comes across a similar issue (took me a while to wrap my head around what was going on). Other dev's that are maintaining large projects may not be able to quickly upgrade their app to CRA 5 and may have an OG tailwind workflow like ours using the CLI. In this case utilizing a quick fix like this may be a better short term solution than upgrading their whole app to CRA 5.

Cheers!