CSS specificity issues w/ tailwind #109

kevinmitch14 · 2023-10-03T16:37:22Z

I recently updated to v2 of Radix Themes and noticed that some of my styles were now being overridden by Tailwind.

Notes: This is only in prod deployments via Vercel, styles are applied correctly when locally developing

My setup was as follows:

// layout.tsx
import "@/app/globals.css"; // Generic tailwind globals.css setup
import "@radix-ui/themes/styles.css";
...

When doing this, the tailwind base styles were taking priority over my radix themes styling. Both specificity (0,1,0).

After playing around with some things, I have tried the following and now the styles are being applied correctly again.

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "@radix-ui/themes/styles.css";
...

To be honest I am not sure if this is the best option, but it has worked for me and may help others. It would be good to get some advice on this and best practices!

3den · 2023-10-03T18:42:25Z

I am having the same problem, but moving the import to the the css file made no difference to me.

vladmoroz · 2023-10-03T19:13:31Z

Those styles are a part of @tailwind base.

Import Radix Themes after @tailwind base and before other Tailwind styles.

@tailwind base;

@import "@radix-ui/themes";

@tailwind components;
@tailwind utilities;

kevinmitch14 · 2023-10-03T19:27:18Z

I'm aware of the problem so I opened this issue as a note for others. The behaviour is tricky because styles work as expected when developing locally. But when you push to prod, styles don't work.

It is not clear in the docs and I suspect that a lot of people will run into this same issue.

Import the global CSS file at the root of your application.
import '@radix-ui/themes/styles.css';

This code snippet does not suggest anything about importing in the CSS file.

Happy to create a PR for the docs site

3den · 2023-10-03T19:37:11Z

Changing the order of imports on the css file did not work for me, It worked only if i changed the order of imports in the layout.tsx (moving '@radix-ui/themes/styles.css' after all other css imports), but even that was not consistent and broke on prod.

vladmoroz · 2023-10-03T19:52:54Z

It is not clear in the docs and I suspect that a lot of people will run into this same issue.

Good call, we'll work out a guide on using Radix Themes with Tailwind.

We recently discovered that Next.js doesn’t always bundle css in the order you import it, so this might be a related factor too.

Changing the order of imports on the css file did not work for me

@3den not sure how this could be the case, could you double check with the example I mentioned above? If that still doesn't work, we'd need a repro sandbox to look into.

3den · 2023-10-03T21:20:02Z

I have moved the radix import after everything.

import '@/styles/app.css';
import '@/styles/overrides.css';
import "@radix-ui/themes/styles.css";

That worked on localhost, but not on prod. It could be that next.js is not obeying the imports order. But even when it does this raises an other issue, having radix imports after tailwind will give it a higher specificity, forcing me to use ! prefix in a lot of classes that did not need it before.

3den · 2023-10-03T21:36:41Z

@vladmoroz after updating to next ^13.5.4 it breaks even on localhost, does not matter that order are the inputs...

vladmoroz · 2023-10-04T07:16:14Z

@3den you need to import Radix Themes styles inside a CSS file right after @tailwind base

3den · 2023-10-04T16:09:35Z

@vladmoroz yes, I did that first, but It did not work.

3den · 2023-10-04T16:23:18Z

With this css:

@tailwind base;

@import 'react-quill/dist/quill.snow.css';
@import '@radix-ui/themes/styles.css';

@tailwind components;
@tailwind utilities;

Still does not work, and I get this style:

3den · 2023-10-04T17:08:08Z

I even tried moving each part to its own css file like this index.css:

/* Resets & Variables */
@import './base.css';

/* Dependencies */
@import 'react-quill/dist/quill.snow.css';
@import '@radix-ui/themes/styles.css';

/* Components */
@import './components.css';
@import './overrides.css';

What seems to happen is that next is splitting the css, into multiple files and for some reason the radix one is being loaded before tailwind, no matter what I do. On the code I shared before the imports where moved to before any other rules @tailwind base included.

I'm trying to figure out how to disable next.js code splitting, which will likely solve this problem, but that feels hacky... IMO forcing the specificity to be lower than 011 is overkill, it was already very easy to override radix classes with important configs.

masoudbydesign · 2023-10-04T17:11:39Z

We're having the same problem over here!

3den · 2023-10-04T17:28:01Z

@vladmoroz actually seems like @radix-ui css is aways slit to its own file:

vladmoroz · 2023-10-04T17:30:35Z

OK, I started with a clean Next 13 setup and reproduced this.

Here's the solution I found.

Install postcss-import and add it to your postcss.config.js.

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Import Tailwind base via an @import statement in your CSS file, then Radix Themes after:

@import "tailwindcss/base";
@import "@radix-ui/themes/styles.css";

@tailwind components;
@tailwind utilities;

Here it is altogether:

Can you confirm whether this works for you?

3den · 2023-10-04T17:44:05Z

@vladmoroz works perfectly!!! 🥳 🎉 🍾

Thanks so much for the help 🍻

tyuen · 2023-11-13T11:33:54Z

// layout.tsx
import "@/app/globals.css"; // Generic tailwind globals.css setup
import "@radix-ui/themes/styles.css";

I find that the order of these files in either order will cause problems.

Using the AlertDialog as an example:

   <AlertDialog.Root>
      <AlertDialog.Trigger>Learn more</AlertDialog.Trigger>

      <AlertDialog.Content>
        <AlertDialog.Description>Contact support?</AlertDialog.Description>

        <div className="flex justify-center gap-2">

          <AlertDialog.Action>
            <Button className="bg-indigo-500">
            OK
            </Button>
          </AlertDialog.Action>

          <AlertDialog.Cancel>
            <Button>
            Cancel
            </Button>
          </AlertDialog.Cancel>

        </div>
      </AlertDialog.Content>
    </AlertDialog.Root>

if we do this:

import "@/app/globals.css"; // tailwind
import "@radix-ui/themes/styles.css";

Radix will override Tailwind and the OK button above will lose the Indigo color and show the theme color. This prevents me from overriding innate styles.

If we do this:

import "@radix-ui/themes/styles.css";
import "@/app/globals.css"; // tailwind

Tailwind will override Radix and the OK button above will be Indigo as intended, but now the Cancel button will lose the theme color and be overridden by Tailwind's base css.

My workaround is, in the layout.tsx file I'm importing the Radix css second (to override Tailwind's base css) and then I'm using Tailwind's selector strategy which prefixes all Tailwind utility classes with "#tw" so that they override Radix's classes. (Only utility classes will get prefixed, the base classes won't.) I also need to set the id of the body tag to "tw".
<body id="tw">

apstone · 2023-12-27T17:50:09Z

OK, I started with a clean Next 13 setup and reproduced this.

Here's the solution I found.

1. Install `postcss-import` and add it to your `postcss.config.js`.

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

2. Import Tailwind base via an `@import` statement in your CSS file, then Radix Themes after:

@import "tailwindcss/base";
@import "@radix-ui/themes/styles.css";

@tailwind components;
@tailwind utilities;

Here it is altogether:

Can you confirm whether this works for you?

This also fixed the issue for me - thanks so much.

Solution credits to radix-ui/themes#109. Added postcss-import package, changed tailwind base to an import, then imported radix ui theme right after that. Suspected cause of bug was due to Nextjs not following the right order of css imports, causing tailwind css to override the radix ui one on the food tables page or something.

kylemh · 2024-04-12T03:18:51Z

@vladmoroz just thought you might want to know about Next 14.2

We updated how CSS is optimized during production Next.js builds by chunking CSS to avoid conflicting styles when you navigate between pages. The order and merging of CSS chunks are now defined by the import order.

vladmoroz · 2024-04-12T09:04:08Z

@kylemh oh nice, thanks for surfacing it!

lengoctus · 2024-06-12T21:19:55Z

Hi you guys. For my solution.
I wrapped the Theme component outside of all the components.

Setting index.css:

Setting index.tsx:

The result:

raine · 2024-10-28T07:28:18Z

In Next 14.2.14, this:

@import "tailwindcss/base";
@import "@radix-ui/themes/styles.css";

gives:

(2:1) postcss-import: @import must precede all other statements (besides @charset or empty @layer)

Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css
./app/globals.css

It doesn't happen if the imports are the other way around.

bloomfieldj · 2025-01-26T20:28:43Z

In case anyone recently upgraded to Tailwind 4.0, here's what worked for me based on this thread and the docs:

/* globals.css */

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "@radix-ui/themes/styles.css" layer(components);
@import "tailwindcss/utilities.css" layer(utilities);

I'm now able to add Tailwind styles to further customize/modify Radix Themes components.

vladmoroz closed this as completed Oct 3, 2023

vladmoroz mentioned this issue Oct 13, 2023

Styles are just buggy. #115

Closed

This was referenced Oct 25, 2023

[AlertDialog] Issue #123

Closed

[Button] Issue #124

Closed

kevinmitch14 mentioned this issue Nov 15, 2023

[Button] Setting property type prevents correct rendering #151

Closed

TomBell95 mentioned this issue Nov 22, 2023

[TextField] TextField slots with Tailwind (Next14) #157

Closed

vladmoroz mentioned this issue Nov 26, 2023

Conflict Between Custom Button Styles and Radix-UI in Next.js Project #162

Closed

vladmoroz mentioned this issue Dec 28, 2023

Button inside alert dialog doesn't have color #210

Closed

StevenYinKop added a commit to StevenYinKop/issue-tracker that referenced this issue Dec 29, 2023

Fixing bug: radix-ui/themes#109 (comment)

01e8562

adamwathan mentioned this issue Jan 9, 2024

Ensure max specificity of 0,0,1 for button and input Preflight rules tailwindlabs/tailwindcss#12735

Merged

vladmoroz mentioned this issue Jan 23, 2024

[AlertDialog] Issue #253

Closed

kevinmitch14 mentioned this issue Jan 23, 2024

Update README.md (Tailwind Specificity Conflicts) #254

Closed

vladmoroz mentioned this issue Feb 14, 2024

reset all:unset issues #296

Closed

vladmoroz mentioned this issue Mar 1, 2024

Webpack throws DeprecationWarning #330

Closed

vladmoroz added ecosystem Incompatibility with something else tailwind An issue related to Tailwind labels Mar 15, 2024

kevinmitch14 mentioned this issue Apr 26, 2024

Button vanishes after adding type #478

Closed

thomasgwatson mentioned this issue Oct 16, 2024

Deeper UI kit and component need notes Hylozoic/hylo#16

Open

72 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS specificity issues w/ tailwind #109

CSS specificity issues w/ tailwind #109

kevinmitch14 commented Oct 3, 2023

3den commented Oct 3, 2023

vladmoroz commented Oct 3, 2023 •

edited

Loading

kevinmitch14 commented Oct 3, 2023

3den commented Oct 3, 2023

vladmoroz commented Oct 3, 2023

3den commented Oct 3, 2023

3den commented Oct 3, 2023

vladmoroz commented Oct 4, 2023

3den commented Oct 4, 2023

3den commented Oct 4, 2023

3den commented Oct 4, 2023 •

edited

Loading

masoudbydesign commented Oct 4, 2023

3den commented Oct 4, 2023

vladmoroz commented Oct 4, 2023 •

edited

Loading

3den commented Oct 4, 2023

tyuen commented Nov 13, 2023

apstone commented Dec 27, 2023 •

edited

Loading

kylemh commented Apr 12, 2024

vladmoroz commented Apr 12, 2024

lengoctus commented Jun 12, 2024

raine commented Oct 28, 2024 •

edited

Loading

bloomfieldj commented Jan 26, 2025

CSS specificity issues w/ tailwind #109

CSS specificity issues w/ tailwind #109

Comments

kevinmitch14 commented Oct 3, 2023

3den commented Oct 3, 2023

vladmoroz commented Oct 3, 2023 • edited Loading

kevinmitch14 commented Oct 3, 2023

3den commented Oct 3, 2023

vladmoroz commented Oct 3, 2023

3den commented Oct 3, 2023

3den commented Oct 3, 2023

vladmoroz commented Oct 4, 2023

3den commented Oct 4, 2023

3den commented Oct 4, 2023

3den commented Oct 4, 2023 • edited Loading

masoudbydesign commented Oct 4, 2023

3den commented Oct 4, 2023

vladmoroz commented Oct 4, 2023 • edited Loading

3den commented Oct 4, 2023

tyuen commented Nov 13, 2023

apstone commented Dec 27, 2023 • edited Loading

kylemh commented Apr 12, 2024

vladmoroz commented Apr 12, 2024

lengoctus commented Jun 12, 2024

raine commented Oct 28, 2024 • edited Loading

bloomfieldj commented Jan 26, 2025

vladmoroz commented Oct 3, 2023 •

edited

Loading

3den commented Oct 4, 2023 •

edited

Loading

vladmoroz commented Oct 4, 2023 •

edited

Loading

apstone commented Dec 27, 2023 •

edited

Loading

raine commented Oct 28, 2024 •

edited

Loading