Я использую пользовательский интерфейс 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
