Radix UI cannot be overridden with TailwindCSS v4

[rozsazoltan]

The documentation provides a guide for TailwindCSS v3. However, in v4 you need to rely heavily on CSS layers. How can I import Radix so that it's not unlayered and doesn't end up stronger than TailwindCSS v4 utilities?

[rozsazoltan]

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;
  }
}

@layer components {
  * {
    /* 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;
  }
}

Source: Radix UI cannot be overridden with TailwindCSS v4

[rozsazoltan]

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:

• TailwindCSS v4 utilities are too weak to override the styling of Ant Design v5 components
• chakra-ui overwrites tailwind classes

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);

• radix-ui/themes issue #109: CSS specificity issues with TailwindCSS

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

• How can I insert a custom layer between TailwindCSS's default base, components and utilities layers?

/* 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.

• From v4 the reset style cannot be overridden by TailwindCSS classes

@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;
  }
}

/* stronger than radix layer */
@layer components {
  * {
    font-family: "Lato", sans-serif;
  }
}

Source: Radix UI cannot be overridden with TailwindCSS v4