Why is basic Tailwindcss not working on Basic Select in radix/theme?

[mtalha218]

I have this very basic select from one of the examples in radixUi documentation.
<Select.Root defaultValue="apple" className="p-5"> <Select.Trigger className="p-5"/> <Select.Content position="popper"> <Select.Item value="apple">Apple</Select.Item> <Select.Item value="orange">Orange</Select.Item> </Select.Content> </Select.Root>

Both of these tailwindCss classes are not working on the Select tag (I want it to have some padding inside the select tag)
But it works when I apply custom inline CSS, Why is that?

<Select.Root defaultValue="apple" > <Select.Trigger style={{padding:"30px"}}/> <Select.Content position="popper"> <Select.Item value="apple">Apple</Select.Item> <Select.Item value="orange">Orange</Select.Item> </Select.Content> </Select.Root>

[vladmoroz]

Which part is this about, Select.Root or Select.Trigger?

[mtalha218]

I think what is displayed on the browser in Select.Trigger, so its about Trigger, i just want to add padding to it

[mtalha218]

And why inline css is working but not tailwind css?

[vladmoroz]

It should work if your CSS imports are in the right order. Do you have a minimal reproduction?

[mtalha218]

Take a look at my code
<Select.Root className="h-[100px] w-[108px]">
<Select.Trigger
style={{
height: "46px",
width: "108px",
borderRadius: "8px",
}}
className="w-[108px] text3 p-4 border border-solid border-[#ABABAB] rounded-[8px] "
placeholder="Hrs"
/>
<Select.Content>
{hourOptions.map((hour) => (
<Select.Item
className="text3"
key={hour}
value={String(hour).padStart(2, "0")}
>
{String(hour).padStart(2, "0")}
</Select.Item>
))}
</Select.Content>
</Select.Root>`

Tailwind and classes are not working in the className. ClassName is only working in Select.item, but my inline css is working. Tailwind is working fine everywhere else. Radix.ui is not allowing className to work
`

[vladmoroz]

Could you do a minimal reproduction on CodeSandbox and share it with me?

[chrishoermann]

I think this has to do with the specificity of the classes in your globals.css.

I fixed this by reordering the layers (found this in some youtube vid):

@layer tw_base, radix_ui, tw_components_utils;

@import "@radix-ui/themes/styles.css" layer(radix_ui);

@layer tw_base {
  @tailwind base;
}

@layer tw_components_utils {
  @tailwind components;
  @tailwind utilities;
}

now all the tailwind css classes should have a higher specificity and overwrite the radix classes if applied

[mylnikovD]

I tried this approach and it broke all the styles in my app, the only way for them to work is to have @import 'tailwindcss'; at the top of my index.css
Any other options to make tailwind classes (w-full for example) to work on basic components?

[rozsazoltan]

This answer was written for v3. In TailwindCSS v4, as you mentioned, @import "tailwindcss"; was introduced instead of the @tailwind directives. So for v4:

• Radix UI cannot be overridden with TailwindCSS v4 #763

@import 'tailwindcss';
@import '@radix-ui/themes/styles.css' layer(components);

Or, if you don't want to use the purpose-specific components layer, we can still define our own layers:

• Source

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