Глобальный CSS пользовательского интерфейса Radix нельзя переопределить с помощью утилит TailwindCSS — только с помощью ⇐ CSS

[Anonymous]

Я использую пользовательский интерфейс ShadCN, Radix UI с TailwindCSS v4. Я заметил, что классы Tailwind не работают, если я не добавлю !important. Например:




{locations.map((location) => (

{location.name}

))}







Код во многом зависит от !important. Если я удалю его, приложение полностью сломается.
Как объединить Radix UI и TailwindCSS v4, чтобы утилиты TailwindCSS всегда переопределяли стили компонентов Radix, но стили компонентов пользовательского интерфейса Radix оставались более сильными, чем базовые стили по умолчанию (базовые < Radix < TailwindCSS)?
Вот мой global.css:
@import "@radix-ui/themes/styles.css";
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@plugin "tailwindcss-animate";

html,
body {
max-width: 100vw;
overflow-x: hidden;
font-family: "Lato", sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Override component library fonts */
[data-radix-collection-item],
[data-radix-scroll-area-viewport],
[data-radix-select-content],
[data-radix-select-item],
[data-radix-select-trigger],
.radix-themes,
.radix-themes *,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
font-family: "Lato", sans-serif !important;
}

* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Lato", sans-serif !important;
}

a {
color: inherit;
text-decoration: none;
}

@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}

@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
font-family: "Lato", sans-serif;
}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... s-only-wit