fix: allow custom config file for postcss again

[kitsunekyo]

this resolves #11920
this was possible before, but was broken with 5614c87

before commit 5614c87 it was possible to use a custom postcss.config.js file to enable/customize postcss plugins and more. this is required for tailwind users that want to use common features like postcss-nesting or postcss-import. https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

here is the docu to the webpack config option that should not be set to false: https://webpack.js.org/loaders/postcss-loader/#config

Reproduction Steps

see CONTRIBUTING.md to test locally. in the newly generated app (using the updated react-scripts config of course) apply these changes:

npm i postcss-import tailwindcss

<!-- append to src/App.tsx, in the <header> section -->
<input
    type="submit"
    className="btn btn-primary mt-8 px-5 py-3"
    value="Click me"
 />

/* add to top of src/index.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./button.css";

@import "tailwindcss/utilities";

/* src/button.css */
.btn {
  @apply cursor-pointer inline-block rounded-md text-base tracking-wide font-medium px-4 py-2;
}
.btn-primary {
  @apply bg-indigo-500 text-white;
}
.btn-primary:hover {
  @apply bg-indigo-400;
}

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.tsx", "./src/**/*.ts"],
  theme: {},
};

// postcss.config.js
module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

when running the app with npm start you should see a correctly styled tailwind button. without this change, the button styles are not correctly applied due to broken import order without postcss-import.

see my original issue on tailwind tailwindlabs/tailwindcss#7049

[facebook-github-bot]

Hi @kitsunekyo!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[D1no]

Any update on this? This regression bit us hard. Thank you ❤️

[kitsunekyo]

yeah, this is just a single line change.
so it would be great if us tailwind users could have this feature back soon. if i can help in any way, let me know

[adamwathan]

Just throwing my vote in to say please consider merging this. Not allowing users to specify which PostCSS plugins they would like to use is a big source of support burden for Tailwind as we're constantly hearing from CRA users who are confused why things aren't working as expected, and right now all we can really do is say "sorry, here are some other tools you can use instead of CRA" which is a bummer.

[zavan]

I was able to make tailwind work (in a very hacky way) using the alpha version of CRACO.

dilanx/craco#378 (comment)

[kitsunekyo]

can anyone help me with the checks?
maybe this is the reason why this PR is getting ignored?

unfortunately the CI log doesnt really say much, and as only a single file changed I fail to understand why the checks fail.

[piotr-cz]

@kitsunekyo I can't inspect build errors, Azure Pipelines says Build not found.

[adamwathan]

Just following up on this — here's a bug people are running into using the latest Tailwind with CRA that would be easy for people to fix if they could just control which PostCSS plugins were being using:

tailwindlabs/tailwindcss#8597 (comment)

As it stands though they are stuck with postcss-preset-env when they don't really need it with Tailwind, and a bug in that library is generating bad output.

[kitsunekyo]

@mrmckeb any chance we can get feedback on this?

[adamduncan]

Is it likely this will find its way into an upcoming patch release?