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

[totorofly]

Hello,

I'm working on a project using Next.js (React-based) and I've encountered a styling issue with buttons that I need some assistance with.

Issue Description:
When I set the following CSS properties for buttons:

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

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

I notice that buttons styled with xxx become invisible - nothing is displayed.

However, if I remove the background-color: transparent; line, the button's appearance returns to normal.

Additional Context:
The need to ensure the button's base style is reset is critical for my project, hence setting background-color: transparent; is essential.
This seems to be a conflict with Radix-UI styles.

Question:
How can I resolve this conflict while maintaining the necessary style reset for my buttons? Is there a workaround or a better practice to achieve the desired outcome without compromising the visibility of the buttons?

Any insights or suggestions would be greatly appreciated.

[vladmoroz]

You need to import Radix Themes styles after your reset so that the attribute selectors don't overwrite Radix Themes classes

[totorofly]

You need to import Radix Themes styles after your reset so that the attribute selectors don't overwrite Radix Themes classes

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

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

I followed your suggestion and placed the CSS for the reset styles before the Radix-UI styles, but the result remains the same - the buttons are still invisible.

[vladmoroz]

Are you using Tailwind?

[totorofly]

Are you using Tailwind?

I specifically uninstalled Tailwind to isolate the issue.

[vladmoroz]

You'll have to debug your import order. Almost all Radix Themes selectors have a specificity of 0,1,0, and so do your attribute selectors, so they'll take over if they appear later in the actual CSS.

For Tailwind there's a known issue with how with the most common setup it inserts itself (including its reset styles) after other styles:
#109 (comment)

[aifuxi]

You'll have to debug your import order. Almost all Radix Themes selectors have a specificity of 0,1,0, and so do your attribute selectors, so they'll take over if they appear later in the actual CSS.

For Tailwind there's a known issue with how with the most common setup it inserts itself (including its reset styles) after other styles: #109 (comment)

I got inspired by @vladmoroz ‘s comments and I read #build-time-imports document and here is my solution

1. Install postcss-import package

npm install -D postcss-import

2. Then add it as the very first plugin in your PostCSS configuration:

module.exports = {
  plugins: {
    // must be first
    'postcss-import': {},

    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. make sure @import statements must come first in you global.css

/* Before */

/*  don't use this
@tailwind base;
@tailwind components;
@tailwind utilities;
*/

/* After,
  when you set 'postcss-import' in your PostCSS configuration,
   use @import 'tailwindcss/xxx',  
   don't use @tailwind xxx   */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import 'bytemd/dist/index.css';
@import 'highlight.js/styles/panda-syntax-dark.css';

/* DO NOT DEFINE ANY REGULAR CSS IN THIS FILE */
/* USE IMPORT TO IMPORT YOUR CUSTOMER STYLE */
@import './xx1.css';
@import './xx2.css';
@import './xxx3.css';

/* Last import @radix-ui/themes/styles.css */
@import '@radix-ui/themes/styles.css';

/* Make sure `@import` statements must come first 👆 */

/* If you are using @layer @apply or other tailwindcss nested declarations,
   maker sure enable 'tailwindcss/nesting' in your PostCSS configuration
*/
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
  }
}

[totorofly]

You'll have to debug your import order. Almost all Radix Themes selectors have a specificity of 0,1,0, and so do your attribute selectors, so they'll take over if they appear later in the actual CSS.
For Tailwind there's a known issue with how with the most common setup it inserts itself (including its reset styles) after other styles: #109 (comment)

I got inspired by @vladmoroz ‘s comments and I read #build-time-imports document and here is my solution

1. Install `postcss-import` package

npm install -D postcss-import

2. Then add it as the very first plugin in your PostCSS configuration:

module.exports = {
  plugins: {
    // must be first
    'postcss-import': {},

    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. make sure `@import` statements must come first in you `global.css`

/* Before */

/*  don't use this
@tailwind base;
@tailwind components;
@tailwind utilities;
*/

/* After,
  when you set 'postcss-import' in your PostCSS configuration,
   use @import 'tailwindcss/xxx',  
   don't use @tailwind xxx   */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import 'bytemd/dist/index.css';
@import 'highlight.js/styles/panda-syntax-dark.css';

/* DO NOT DEFINE ANY REGULAR CSS IN THIS FILE */
/* USE IMPORT TO IMPORT YOUR CUSTOMER STYLE */
@import './xx1.css';
@import './xx2.css';
@import './xxx3.css';

/* Last import @radix-ui/themes/styles.css */
@import '@radix-ui/themes/styles.css';

/* Make sure `@import` statements must come first 👆 */

/* If you are using @layer @apply or other tailwindcss nested declarations,
   maker sure enable 'tailwindcss/nesting' in your PostCSS configuration
*/
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
  }
}

Thank you for your response. I tried following your steps, but it still doesn't work. My current solution is to replace all instances of the native button with div. I don't think this is an issue with Radix, so I've decided to close this issue.

[syukranDev]

happened to me today, but i fixed it by custom css, but still i hope this get fixed.

[vladmoroz]

I raised this in the Tailwind repo the other day and Adam fixed the root issue:
tailwindlabs/tailwindcss#12735

We'll have to wait for a new Tailwind release.

[onurhan1337]

@vladmoroz it's looks merged, any update here? I updated my @radix-ui/themes and tailwindcss packages the latest version and added @import '@radix-ui/themes/styles.css'; line correctly but I still have the same issue.

Note: This issue started when I used sonner package and other shadcn-ui components. I guess conflict happened there.

here an example:

it must be like it:

[vladmoroz]

@onurhan1337 there was no Tailwind release with the change yet

[onurhan1337]

@vladmoroz, when I saw the merge, I thought it was already released. Sorry for my mistake. @dwzkit's advice works for now. Thanks.