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