Add support PostCSS plugins

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?

[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? 🙏

[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!