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