Created by: kitsunekyo
this resolves #11920 this was possible before, but was broken with 5614c87b
before commit 5614c87b 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 https://github.com/tailwindlabs/tailwindcss/discussions/7049