PostCSS Import Order with base styles not working

[onasman]

What version of Tailwind CSS are you using?

v3.0.16

What build tool (or framework if it abstracts the build tool) are you using?

postcss 8.4.5, react-scripts 5.0.0

What version of Node.js are you using?

v14.7.0

Describe your issue

#7049 describes my issue very well as it's the exact same one. I'll copy down below:

I am adding some style classes after tailwind/base and tailwind/components via an import that for some reason gets overridden

when I inline the styles from button.css, the styles work perfectly, and overwrite the tailwind styles, due to css order. (both selectors have a specificity of 010)
once I move them to the imported file, the custom styles seem to be loaded before the tailwind styles, and break.

i can reproduce the issue with a brand new CRA5:
yarn create react-app my-app --template=typescript

apply these changes:

<!-- append to src/App.tsx -->
<input
    type="submit"
    className="btn btn-primary mt-8 px-5 py-3"
    value="Login"
 />

/* 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: {},
};

the applied styles in the devtools look like this:

you see that this definition overwrites our button styles, even though they should be loaded before our button styles.

button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

[adamwathan]

I expect this is a CRA problem, do you have postcss-import set up? If not your imports are not actually being inlined, and I sort of doubt CRA will even let you setup postcss-import because they don't let you customize anything.

This works as expected with postcss-cli for example, so I don't think this is an issue in Tailwind itself. Personal recommendation is to avoid CRA if you can, Vite for example can do everything CRA can do and is much faster and supports custom PostCSS configurations which CRA doesn't.

[onasman]

Ok I see..
Yes I have postcss-import set up. My postcss.config.js looks like this:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
  ],
}

[onasman]

This is a rather big project so migrating to vite for this is not an option but after reading up on it we might migrate in the future if it's determined as stable enough.
Looks like this PR would solve it for CRA but I guess I'll have to wait for it to be approved. This should be quite a common problem since it affects everyone with CRA and tailwind 3.0 using postcss-import.
facebook/create-react-app#11926

[kitsunekyo]

so i found something in our app that could potentially help some of you with these import order issues.

even though our postcss-import etc was configured correctly (in our ejected CRA4 app), I had the issue of the tailwind/base styles taking higher precedence than our css module styles. (we just didnt notice, because we're still using an older tailwind version.)

what i found was that in our index.tsx file, we were importing a lot of stuff needed in our react application.

notice the import order.

/* index.tsx */
import { App } from 'src/App';
import './i18n';
import './index.css'; // this file holds all tailwind styles
// ...

/* index.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

the component tree (App) was imported BEFORE the index.css, which loads the tailwind styles.
due to that, the css modules in the component tree was rendered first, and is then (if the specificity is the same) overwritten by tailwind/base.

i moved the import of index.css above our App import, and that fixed the problem. my style were no longer overwritten.

/* index.tsx */
import './index.css'; // this file holds all tailwind styles
import { App } from 'src/App';
import './i18n';
// ...

[7iomka]

Man! You are genius! Many thanks!

[joshxyzhimself]

This is code from tailwind:

[type=button],
[type=reset],
[type=submit],
button {
 -webkit-appearance:button;
 background-color:transparent;
 background-image:none
}

In our case, the [type=submit] selector overrides the button selector.

The following fixed it:

-   button {
+   button[type=button] {
        @apply outline-none m-1 p-1 rounded;
        @apply text-center text-sm font-normal;
        @apply text-black bg-indigo-200;
    }

But in the tailwind code, shouldn't those be changed to the following?

-   [type=button],
-   [type=reset],
-   [type=submit],
+   button[type=button],
+   button[type=reset],
+   button[type=submit],
    button {
     -webkit-appearance:button;
     background-color:transparent;
     background-image:none
    }