sultondev commented 1 year ago

Current I'm facing the problem with prelight (preset css styles) and css '@apply'

Tailwind css version

Tailwindcss: ^3.3.3

React app built with vite

React: ^18.2.0
Vite: ^4.4.5
postcss :^8.4.27

Node js version

Node: ^18.16.0

Browser:

chrome

OS

Windows

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-xxwuck?file=src%2Findex.css

Issue

When I use tailwindcss class directly in the html element it works fine. But when I use it by assigning to my custom class with '@apply' in css the button's background doesn't change and shows that the preset (prelight) overrides my code which was written with css '@apply': Located in tailwind base;

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

Also it overrides UI kits styles for button besides in reproduction I also added Material UI as instance. I could solve the problem by using css important but it would only make code messy. Important doesn't solve the problem with UI libraries' styles. It overrides all UI libraries styles for button (Material UI, Ant design, Mantine UI, e.t.c).

adamwathan commented 1 year ago

Hey! There's always potential for conflicts like this when mixing multiple styling libraries unfortunately.

Usually the right answer here is to make sure the CSS is all loaded in the right order, by doing something like:

@tailwind base;

/* Import MUI styles here */

@tailwind components;
@tailwind utilities;

...but because of the way MUI works with their StyledEngineProvider and stuff you don't really have this control. Best bet in this case is to disable Preflight:

https://tailwindcss.com/docs/preflight#disabling-preflight

https://stackblitz.com/edit/vitejs-vite-mh9d6l?file=tailwind.config.js

It means you lose some of the Tailwind base styles but again this sort of thing is just what you have to deal with when mixing multiple styling solutions that have conflicting opinions.

There's another big discussion about it here from others who are also using MUI that I would recommend looking at:

https://github.com/tailwindlabs/tailwindcss/discussions/5969

Sorry couldn't be more help — closing as we don't consider this a bug, we do want those styles in Tailwind.