Create-react-app: Add support PostCSS plugins

[pavinthan]

How to use additional PostCSS plugins like tailwindcss?

plugins: () => [
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
        autoprefixer: {
            flexbox: 'no-2009',
        },
        stage: 3,
    }),
 ],

Can we extends this to use some other plugins?

[patricklafrance]

Hi @pavinthan,

CRA doesn't support this use case.

The official recommendation from CRA is to make your own fork and customize PostCSS to your needs.

You can find the documentation here: https://facebook.github.io/create-react-app/docs/alternatives-to-ejecting#docsNav

As an alternative to create a fork, you could use craco and follow this recipe to extends the PostCSS plugins.

As @Timer mentioned in other issues, using craco is very prone to breaking since it's an hacky layer on top of CRA to make it more configurable.

That begin said, at Sharegate all our new apps use CRA + craco and they all extends the PostCSS config to add additional CSS features and PostCSS plugins.

This means that you can be confident that if CRA introduce a change that breaks how craco makes PostCSS configurable we will try to fix it as soon as possible.

Hope it helps!

[pavinthan]

@patricklafrance Thank you for your great reply It's really helps, but I don't like to overrider CRA, just like use CRA as CRA.

and Tailwind CSS becomes most popular utility-first CSS framework seems 22,833 weekly downloads ( ref: https://www.npmjs.com/package/tailwindcss ) so my suggestion CRA users use Tailwind CSS without extending or customize CRA.

CRA can apply postcss tailwindcss plugin only tailwind.js ( recommenced config file from https://tailwindcss.com/docs/installation#2-create-a-tailwind-config-file ) in root directory

@gaearon may you please have a look and advice on this please? 🙏

[RomainLanz]

I started to use craco on my application to extend the Webpack configuration and it's working great.

Do you believe it would be a good idea to create a PR in the documentation repository to add it as a wrapper for people who want to extend the CRA configuration without ejecting their app?

[pavinthan]

Thanks @RomainLanz but I don't like to override CRA
and I have already created a PR https://github.com/facebook/create-react-app/pull/5893 to add this support but It's rejected 😢

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[pavinthan]

Any update on this guys?

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[pavinthan]

I'm closing this issue with 💔because no response 😢 but waiting to see this in future.