Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

include postcss-import for proper tailwind support #11920

Closed
kitsunekyo opened this issue Jan 13, 2022 · 7 comments · May be fixed by #11926
Closed

include postcss-import for proper tailwind support #11920

kitsunekyo opened this issue Jan 13, 2022 · 7 comments · May be fixed by #11926

Comments

@kitsunekyo
Copy link

kitsunekyo commented Jan 13, 2022

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

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
Copy link

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
Copy link
Author

kitsunekyo commented Jan 13, 2022

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
Copy link

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
Copy link
Author

kitsunekyo commented Jan 14, 2022

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

kitsunekyo added a commit to kitsunekyo/create-react-app that referenced this issue Jan 14, 2022
this fixes issue/facebook#11920 and was introduced in commit/5614c87
@tom-ricci
Copy link

See dilanx/craco#378

@plsdev89
Copy link

plsdev89 commented Jul 6, 2023

is there an update or plan on this?

@kitsunekyo
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants