Tailwind v4 + Radix UI (shadcn) Dropdown/Select Transparent After Upgrade

[androidStern]

Tailwind v4 + Radix UI (shadcn) Dropdown/Select Transparent After Upgrade

Body:

I recently upgraded a Next.js 14.2 project from Tailwind v3 to Tailwind v4. After the upgrade, several Radix UI components (from [shadcn/ui](https://github.com/shadcn/ui)), including the Select dropdown, started rendering fully transparent. The dropdown menu is visible as text floating on the page, with no background panel at all.

Here’s a minimal snippet of one of the affected components (InviteUserForm), showing how I’m using Radix Select with shadcn’s utility components:

import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
} from "@/components/ui/select";

...

<Select onValueChange={field.onChange} value={field.value}>
  <FormControl>
    <SelectTrigger className="border-gray-300">
      <SelectValue placeholder="Select role" />
    </SelectTrigger>
  </FormControl>
  <SelectContent>
    <SelectItem value="INTERNAL">Internal</SelectItem>
    <SelectItem value="EXTERNAL_ADMIN">External Admin</SelectItem>
    ...
  </SelectContent>
</Select>

What I’ve observed:

• The content is definitely rendered (I can see the text), but the dropdown background is missing/transparent.
• Checking dev tools shows bg-popover or similar classes are present, but no actual background color is applied.
• I have a globals.css with custom @layer base { :root { ... } } for shadcn’s theme variables, and I do see --popover: 0 0% 100%; for white, but it’s not showing up.
• I tried forcing a color in dev tools and with !important rules like:

element {
background-color: #fff !important;
}

but it still appears transparent.  

**My setup**:
- **Next.js 14** with the App Router
- **Tailwind v4** (confirmed in `package.json`: `"tailwindcss": "^4.0.0"`)
- **Radix UI** (2.1.1), using `@radix-ui/react-select`  
- **shadcn/ui** components, added via `shadcn add select`

**What I’ve tried**:

1. **Checked Tailwind content paths**: My `tailwind.config.ts` includes `"./src/**/*.{ts,tsx}"`, so it should see these classes.
2. **Ensured CSS variables**: `globals.css` defines `--popover`, `--foreground`, etc. 
3. **Updated shadcn**: Ran `shadcn add select` again to overwrite with the newest Tailwind v4-compatible code.
4. **Attempted a top-level !important override** in a `@layer utilities` block:
 ```css
 @layer utilities {
   body [data-radix-select-content] {
     background-color: #fff !important;
   }
 }

Still shows transparent.

Has anyone encountered Tailwind v4 + Radix UI dropdowns rendering invisible backgrounds? Am I missing some new v4 config or a known fix for these theme variables? Any guidance or best practices for making the SelectContent background appear properly would be greatly appreciated!

Thanks in advance!

[MbBrainz]

Same problem here!

[pdsuwwz]

@androidStern @MbBrainz Hello ~

Have you tried the official upgrade command, you can use Upgrade Tool：

npx @tailwindcss/upgrade

I encountered a similar issue when upgrading from Tailwind v3 to v4. After following the official upgrade guide, it started working.

Additionally, Tailwind v4 no longer automatically detects the tailwind.config.ts file, meaning that by default, all configurations are in the CSS:

You can refer to this repo nextjs-nextra-starter and Commits

[sp88011]

Same problem here. Total mystery...

[egucciar]

I'm using shadcn for the first time bg-popover just does not seem to work in tailwind v4. Am I missing something here?
I started the project from V4, so there was nothing for me to upgrade.

[androidStern]

did you update ur shad components? i deleted my whole shadcn component directory and just reinstalled the latest. that might help

[egucciar]

@androidStern as i mentioned, i started the project from v4. So I don't understand why i need to upgrade components if i started from v4?

[ahmethedev]

do not use shadcn@latest add select
try shadcn@2.3.0 add select command

Also you might want to use tailwindcss@3

[egucciar]

This is tough for me personally since I'm referencing docs/sites that have already progressed to v4, including shad's site. do you think this should be filed as a bug against shadcn?

[ahmethedev]

definitely its about shadcn. Some components are nit compatible with tailwind 4 or react 19 couldn't figured out yet.

[ahmethedev]

okay found the solution,

follow the instructions on shadcn website for tailwind 4 but
instead of npx shadcn@latest init
use npx shadcn@canary init

and for the components you want to install use
npx shadcn@canary add select

that worked for me.

[vilindh]

I had the same problem with the contents being transparent to the background, until I tried debugging by setting a background color to the DropdownContent.

<DropdownMenuContent className="w-56">:

vs

<DropdownMenuContent className="bg-gray-300 w-56">

Tried this using both the latest as well as the canary releases, as ahmethedev suggested above, same result in both.

[olawalessed]

Hello guys,
I had the same issue, my select content background was showing as transparent after updating tailwind to v4 and i think this should help those who might face same issue too.

Just copy and paste the css code below into your global.css

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
  --background-image-gradient-conic: conic-gradient(
    from 180deg at 50% 50%,
    var(--tw-gradient-stops)
  );

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

@theme {
  --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
  --background-image-gradient-conic: conic-gradient(
    from 180deg at 50% 50%,
    var(--tw-gradient-stops)
  );

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}


/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer utilities {
  :root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --foreground-rgb: 255, 255, 255;
      --background-start-rgb: 0, 0, 0;
      --background-end-rgb: 0, 0, 0;
    }
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

You can further make changes to it as you like once it works.

[keyur-niq]

I updated in , and it seems to work

@layer base {
  :root { 
 --popover: 0 0% 100%;
}
}

[mechacPeroDev]

Add these props to your SelectContent. This should work:

<SelectContent
  position="popper"
  className="w-[var(--radix-select-trigger-width)] bg-white dark:bg-neutral-900"
>
  <SelectItem value="INTERNAL">Internal</SelectItem>
  <SelectItem value="EXTERNAL_ADMIN">External Admin</SelectItem>
  ...
</SelectContent>

[Shubham12399]

I had same Problem,

here in tailwind.config.ts i were used
colors: { // Flat / base colors (regular buttons) background: "hsl(var(--background) / <alpha-value>)", foreground: "hsl(var(--foreground) / <alpha-value>)", ...... }
so here i used hsl but when the project starts in globals.css that was used values like
:root{ --background: 0 0% 100%; --foreground: 0 0% 5%; }

without hsl wrapper so intentionally it is right but in the tailwind v4 there migh some problem that it generates only 
`.bg-background{background:var(--background)}` which is incorrect. so the solution is to use direct hsl wrapper to the values of your variable eg: 

❌ :root { --background: 0 0% 100%; --foreground: 0 0% 5%;} --> this fails but when i used this
✅ :root { --background:hsl( 0 0% 100%); --foreground: hsl(0 0% 5%;)}
and removed hsl from the tailwind.config.ts colors variables and that got worked

[zatura328]

Like most people i've just override the css.
the only css i needed to add is this one.

[data-slot="select-content"] {
  background-color: var(--background);
  color: var(--foreground);
  opacity: 1;
}

and in dark light theme set the color (suppose to already be there):
these block are automatically added/generated when installing Shad. In App.css or index.css for react project.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
}