Question Details

No question body available.

Tags

css next.js tailwind-css tailwind-css-4 radix-ui

Answers (2)

Accepted Answer Available
Accepted Answer
November 2, 2025 Score: 1 Rep: 19,645 Quality: High Completeness: 100%

TL;DR: Place the Radix styles.css in the components layer by layer(components).

@import 'tailwindcss';
@import '@radix-ui/themes/styles.css' layer(components);

Place your own default styles in the base or components layer (depending on priority): use components if you want to override Radix's default styles, or base if you don't.

@import 'tailwindcss';
@import '@radix-ui/themes/styles.css' layer(components);
@layer base {
   {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    / override default font-family, but it will be weaker than all Radix UI styles, which is not a problem /
    font-family: "Lato", sans-serif;   / avoid using !important modifier /
  }
  html {
    color-scheme: light;
    @variant dark {                    / use @variant and CSS-nesting instead of @media (prefers-color-scheme: dark) /
      color-scheme: dark;
    }
  }
}
@layer components {
  / Override radix component library fonts /
  / Note: I don't fully understand this part - the many listings in the question - but  is sufficient to select all elements /
   {
    / it will properly override the styling of Radix UI components, but it will be weaker than the TailwindCSS utilities, so for example the font-serif class will remain strong /
    font-family: "Lato", sans-serif;  / avoid using !important modifier /
  }
}

Always avoid using !important - it's a red flag

Now that you've fixed the errors, can address !important. From v4 onward, this has also changed - important should be written after the utility, not before: bg-red-500! instead of !bg-red-500.

But in CSS, if you have to force !important, that's a bad sign. If you're using Radix and TailwindCSS together, you need to order the CSS layers properly, so that Radix's layers are smaller than the @layer utilities where TailwindCSS places its own classes.

Related for @layer:

CSS layers play an important role in determining priority between different systems

Here are a few examples where using @layers makes it much easier to achieve consistency between two systems working together:

Solution: Proper handle declaration for Radix

Let's see what can be done in the case of Radix:

Don’t use @tailwind base. Set up separate CSS layers for Tailwind and Radix Themes.

Source: Tailwind base styles for Radix UI

This is an outdated description for TailwindCSS v3. In v4, there's no @tailwind base anymore. Instead, @import "tailwindcss"; automatically imports the base styles. So in v4, you need to customize the @import "tailwindcss"; code, which by default looks like this:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

So, following the mentioned example (from issue #109) - which was written for v3 - in v4 it corresponds to something like this:

/ Added new radix layer between base and components /
/ Sort: theme < base < radix < components < utilities /
@layer theme, base, radix, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
/ Import radix styles to new radix layer /
@import "@radix-ui/themes/styles.css" layer(radix);

That is, set the Radix themes (in radix layer) to be weaker than the utilities layer but stronger than the base layer.

Handle your own styling for Radix UI, which is still weaker than TailwindCSS

And if you want to completely separate Radix's original styles from your own, then introducing Radix is fine, and the components layer can remain entirely for Radix, always the stronger layer.

@layer theme, base, radix, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "@radix-ui/themes/styles.css" layer(radix);
@import "tailwindcss/utilities.css" layer(utilities);
/ weaker than radix layer /
@layer base {
   {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Lato", sans-serif;   / avoid using !important modifier /
  }
  html {
    color-scheme: light;
    @variant dark {                    / use @variant and CSS-nesting instead of @media (prefers-color-scheme: dark) /
      color-scheme: dark;
    }
  }
}
/ stronger than radix layer /
@layer components {
  / Override radix component library fonts /
  / Note: I don't fully understand this part - the many listings in the question - but  is sufficient to select all elements /
   {
    font-family: "Lato", sans-serif;  / avoid using !important modifier /
  }
}

Extra: can use an existing layer without creating a new one

Just note without new radix layer: if you don't want to introduce a separate new layer, the default layer named components can also work. Since it's stronger than base but weaker than utilities (as you saw earlier).

@import 'tailwindcss';
@import '@radix-ui/themes/styles.css' layer(components);
November 2, 2025 Score: 0 Rep: 19,645 Quality: Medium Completeness: 100%

Important note: The question contains too many inaccuracies; this answer can be deleted after the question is revised, as it is no longer relevant.

Breaking changes from v4

From v4 onward, there's no need for a tailwind.config.js - just delete it.

Starting with v4, the @tailwind directive has been removed - you only need a single import instead:

Avoid relying on @media prefers-color-scheme if you want to switch dark mode manually. From v4 onward, use the @variant dark instead:

And from v4 onward, they rely heavily on CSS layers, so unlayered CSS (like the one you're using) is too strong compared to TailwindCSS utilities:

Place them in @layer base if they are considered default styles:

/ See more: https://stackoverflow.com/a/79807110/15167500 /
@import 'tailwindcss';
@import '@radix-ui/themes/styles.css' layer(components);
@custom-variant dark (&:is(.dark ));
/ @tailwind components; / / Removed /
/ @tailwind utilities; / / Removed /
@layer base {
  / @media (prefers-color-scheme: dark) { / / Ignore this /
  @variant dark { / Successfully for manual dark mode /
    html {
      color-scheme: dark;
    }
  }
  html,
  body {
    max-width: 100vw;
    overflow-x: hidden;
    font-family: "Lato", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
   {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Lato", sans-serif !important;
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    font-family: "Lato", sans-serif;
  }
  / 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;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
}

Extra: avoid using @apply if possible:

And create the missing settings. For example, in the case of border-border, your border color doesn't exist yet; for outline-ring, your ring color doesn't exist; for bg-background, a color named background doesn't exist; etc.

For global colors:

@theme {
  --color-border: #ccc; / should use border-border, but also text-border, bg-border, etc. /
  --color-ring: #ddd;
  --color-background: #eee;
}

Undocumented, for utility-specific colors:

@theme {
  --border-color-border: #ccc; / only for border-border /
  --outline-color-ring: #ddd; / only for ring-ring and outline-ring /
  --background-color-background: #eee; / only for bg-background /
}

And I see you're using a plugin in the config file. From v4 onward, the new @plugin directive allows this in the CSS-first configuration, like this:

@plugin "tailwindcss-animate";