Why I need to use PostCSS to build Tailwind on React in order to used it, when using Vue I just need to import the CSS?

[marco-carvalho]

I have this repository that was very simple to integrate Vue with Tailwind. I just needed to create a tailwind.config.js, postcss.config.js, one .css file with the minimum code required, and import the .css file on the main.js. Just as straightforward as I wanted.

On other hand, I'm working in another project using React, and every tutorial to integrated it with Tailwind makes me run PostCSS to generate a new Tailwind CSS file. I though it was supposed to be just like Vue, but to me it is strange to versionate the entire build from PostCSS + Tailwind. If I want to customize some aspects or a new version from Tailwind comes out, I'm faded to generate a brand new build and versionate everything.

Am I missing something here? I wish using React with Tailwind was as straightforward as using Vue with Tailwind, but maybe I'm doing something wrong or didn't understand it.

[swyxio]

@marco-carvalho not really the framework's fault, its the build tooling you are using.

vue-loader installs postcss for you by default, whereas other tooling (eg create-react-app) does not.

if you used different build tools you may have easier default options, eg vite https://github.com/sorxrob/vite-react-tailwind-starter/

[marco-carvalho]

@sw-yx thanks for the reply, I found these 3 PR on CRA repo (facebook/create-react-app#8331, facebook/create-react-app#8474, facebook/create-react-app#8907) if I understand it correctly, when one of those PR merge, then CRA gonna have support to postcss, making it easier (just like Vue) to plug-in with Tailwind?

[swyxio]

those PRs seem unsolicited and dead, i wouldnt hold my breath.