include postcss-import for proper tailwind support

[kitsunekyo]

Is your proposal related to a problem?

a very common use-case of tailwind is using it with the postcss-import plugin
https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

as CRA already provides support for tailwind out of the box and is opinionated about the plugins (flexbugs fixes, preset-env, ...) supporting this use case would be helpful.

Describe the solution you'd like

add postcss-import as a dependency + plugin, to provide proper support for common tailwind features.

Describe alternatives you've considered

• added a postcss.config.js to overwrite the loaderOptions, but the file is just ignored.
  PostCSS Import Order with base styles not working tailwindlabs/tailwindcss#7049 (comment)
• i've tried craco -> doesn't support CRA5, and I also tried ejecting (which works, but we're trying not to eject any longer)

Additional context

the issue with not having postcss-import available isn't immediately obivious. but it breaks the load order of css imports.
tailwindlabs/tailwindcss#7051

[aaltepet]

I'm playing around with v5 + craco today, and I've had no issues using tailwindcss. What problem are you having with v5+craco+tailwindcss

[kitsunekyo]

I'm playing around with v5 + craco today, and I've had no issues using tailwindcss. What problem are you having with v5+craco+tailwindcss

webpack 5 has changed the structure of the postCss options.

webpack 5 use this way
{
  loader: "postcss-loader",
  options: {
    postcssOptions: {
      plugins: [],
    },
  },
},

webpack 4 use this way
{
  loader: "postcss-loader",
  options: {
    plugins: [],
  },
},

so using craco to prepend a plugin, or change the plugins at all will result in an error

see this issue: dilanx/craco#353

[aaltepet]

Got it. I wasn't sure if you were trying to enhance CRA's usage of postcss or not; it sounds like you are.

[kitsunekyo]

i just found out that for some reason create-react-app disables the use of config files:

https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js#L143

if you dont want to include postcss-import then please remove the config: false flag in the loader, as this prevents us from using a custom postcss.config.js file.
https://webpack.js.org/loaders/postcss-loader/#config

this issue was introduced in 5614c87

[tom-ricci]

See dilanx/craco#378

[plsdev89]

is there an update or plan on this?

[kitsunekyo]

as communicated, there is no intention to support cra any further