如何在TailwindCSS中移除Radix UI Select组件的聚焦黑色环形边框

方法一：通过Radix的slotProps精准设置触发器样式 #

Radix UI的Select组件聚焦边框是应用在内部的按钮元素上，直接给Select.Trigger加Tailwind类不会生效，需要通过slotProps把样式传递到内部按钮：

<Select.Root>
  <Select.Trigger
    slotProps={{
      button: {
        className: "focus:ring-0 focus:outline-none focus:shadow-none"
      }
    }}
  >
    选择选项
  </Select.Trigger>
  <Select.Portal>
    <Select.Content>
      <Select.Item value="option1">选项1</Select.Item>
      <Select.Item value="option2">选项2</Select.Item>
    </Select.Content>
  </Select.Portal>
</Select.Root>

方法二：自定义全局CSS覆盖默认样式 #

如果不想用slotProps，可以直接写全局CSS覆盖Radix的聚焦样式：

/* 在全局样式文件中添加 */
.radix-select-trigger[data-focus-visible] {
  outline: none !important;
  box-shadow: none !important;
}

要是想和Tailwind整合，也可以用@layer把样式封装成工具类：

@layer utilities {
  .no-radix-select-focus {
    .radix-select-trigger[data-focus-visible] {
      outline: 0;
      box-shadow: none;
    }
  }
}

之后把这个工具类加在Select的根容器或者父元素上即可。

为什么之前的Tailwind类没生效？ #

你之前加的focus:outline-none等类是作用在Select.Trigger组件的外层元素上，但Radix的聚焦边框样式是绑定在内部的原生<button>元素上，所以直接加在组件上无法覆盖内部元素的样式。

内容的提问来源于stack exchange，提问作者Taio