Base styles with specificity (0, 1, 0) conflict with React component styles that inject their css first

[WilfredoHQ]

What version of Tailwind CSS are you using?

v3.1.3

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

vite 2.9.12

What version of Node.js are you using?

v16.14.2

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-gusxul

Describe your issue

In React when using a button it has a transparent background color that comes from the base styles, you can change the background color easily with a tailwindcss utility, however, when using your own style in another file the component styles are injected first.

In the result you can see that the first button is shown as desired and the second button has a transparent background and it is because the selectors that match are .myButton and [type='submit'], both with the same specificity (0, 1, 0), then the cascade is taken and the styles of [type='submit'] are applied where it is indicated that the background color is transparent, in this button what I expect is that it is the same color of the first button.
When observing the third button everything goes well because the utility is the one that defines the color and overcomes the other 2 buttons in cascade.

A possible solution is to inject the tailwindcss styles at the beginning and we can see that the first and the second button comply with what is desired, but in the third one the utility is not applied because the .myButton selector overcomes tailwindcss in cascade.

Going back to the beginning, the taiwindcss utilities should be in the order it handles and that is base, components, utilities and put the custom classes inside the components layer, but it is more complicated to have files that are imported directly into the React components either css or css modules.

The same detail is when using Material UI that when injecting its styles first the utilities work, but the tailwindcss base overwrites the MaterialUI base and to solve it you use corePlugins: { preflight: false }, but you lose the whole tailwindcss base, instead of just extending it.

A solution would be to use a specificity that is less than (0, 0, 1), so that any other style, whether its own or the base styles of other libraries, can override the tailwindcss base styles, but keep the tailwindcss base styles that the other base styles do not have defined, and this could be achieved by using :where() as sanitize.css does.

In this way, the base, components and utilities would be below the React component styles and the utilities could overwrite by cascading, the component styles and the injected own styles at startup could overwrite the tailwindcss base styles by specificity and keep by cascading those styles not defined in the own styles.

Now .myButton has a specificity of (0, 1, 0) and :where([type='submit']) has a specificity of (0, 0, 0) and while the latter overrides it in cascade .myButton overrides it in specificity.

[adamwathan]

Hey! Yeah so this is why we give you Tailwind's styles as three separate layers, so you can control the order of all of your CSS and make sure any custom CSS is injected in the right place.

I wrote a big write up about this a few months back in a related issue:

#6602 (comment)

Ultimately it's just on you to make sure all of the CSS you are using is ordered the way it needs to be to interact with each other the way you want.

Going to close as don't consider this a bug and no concrete plans to change how things work here. My personal advice is not to mix multiple CSS paradigms in a project if you can avoid it, like I would highly discourage using CSS modules at the same time as Tailwind, or having CSS files that are imported by individual components. Tailwind is designed for a more traditional "single global stylesheet" architecture so you'll have the best results using it that way 👍

Hope that helps, don't mean to be dismissive or anything but also don't want to give any false hope that this is a problem I plan to devote any time to ❤️

[yuzhva]

having the same issue in our library - that's a bad practice when 3rd party library aggressively overrides local styles.

@WilfredoHQ Thank you so much for the proposal with a workaround.
Placing import tailwindcss as the 1st local resource solved the issue 🙇

@adamwathan

don't consider this a bug and no concrete plans to change how things work here

sounds a bit rude but I know how tough to support open source projects - thank you so much for your work 💪

P.S: here is the workaround that worked for me:
for example, I'm having create tailwind.scss and main.scss:

Here is entry index.js:

// Step 1: import all packages from node_modules
import React from 'react';
import moment from 'moment';
import { useTranslation } from 'react-i18next';

// Step 2: import tailwind CSS styles
import 'tailwindcss/tailwind.css'

// Step 3: import your craft JS from the project
import { consoleLog, calculateBugs } from './utils';

// Step 4: import CSS styles at the end after all
import './main.scss';

That's all - everything works as expected. The most important step - is Step 2. To place tailwind.css import on top of all local imports.

P.P.S: Instead of import 'tailwindcss/tailwind.css' directly - you can create your own, custom file with same set of imports and import is as import './tailwind.scss';

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';