我同时使用RadixUi和TailwinCss，但在RadixUI组件上应用TailwinCss类或CSS类时，Style类不会重写RadixUi的样式.
<TextField.Input
className="[&&]:h-[57px] [&]:rounded-[8px] text3 [&&]:border-1 [&&]:border-solid
[&&]:border-second_black"
placeholder="Enter your email"
/>
我必须添加"[&；&；]:"才能使该类成为优先级？为什么会这样呢？我怎么才能让我的css或tawinCss突出，而不是RadixUi样式呢？
[&&]会增加class specificity，但您不应该依赖它，因为您永远不知道要与第三方组件的CSS竞争您需要的专用性有多高.它很难保持一致，在进行一些微小的更新后，它可能会随机中断.(不过，如果你真的想做的话，你可以做[&&&&&&&&&&&&&]这样的事……)
在tailwind 中，您通过在开头添加!来使实用程序变得重要，因此您应该这样做:
<TextField.Input
className="!h-[57px] !rounded-[8px] !text-3 !border-solid !border-second_black"
placeholder="Enter your email"
/>
然而，对于RadixUi Textfield，似乎即使省略了TextField.Root，它仍然会随子rt-TextFieldChrome div(由TextField.Input覆盖)一起生成.因此，Input和TextFieldChrome上都需要应用边框样式.否则，在Input上添加边框半径后，覆盖的div将如下所示:(为了更好地演示，我已经使边框半径和 colored颜色 更有意义)
如果在TextField.Root下包含其他组件，则可以使用[&>*]同时 Select 这两个组件，或者同时指定[&>input]和[&>.rt-TextFieldChrome]:
<TextField.Root className="[&>*]:!rounded-[50px] [&>*]:!border-solid">
<TextField.Input className="!h-[57px]" placeholder="Search the docs…"/>
</TextField.Root>
[&&] and why it works?tailwind 中&的用法是arbitrary variants，其中&表示要修改的 Select 器.
首先，让我们以文档的示例[&:nth-child(3)]:underline来解释它是如何工作的.这里&将被当前 Select 符(类名[&:nth-child(3)]:underline带有一串转义字符\以避免保留的CSS关键字)and a dot in front替换，生成如下内容:
/* Selecting elements with class name "[&:nth-child(3)]:underline",
but only when it’s the third child. */
.\[\&\:nth-child\(3\)\]\:underline:nth-child(3) {
text-decoration-style: underline /*this is the style from :underline*/
}
现在看[&&]:h-[57px]，每个&将被替换为一个点和当前 Select 器(类名[&&]:h-[57px])，因此生成的 Select 器将是.[&&]:h-[57px].[&&]:h-[57px]，它 Select 所有类为[&&]:h-[57px]和[&&]:h-[57px]的元素.
虽然 Select 同一个类两次并不会对 Select 哪些元素产生影响，但因为现在这个css声明中包括了两个类 Select 器，所以它的类列的特殊性从1增加到2，这使得 Select 应用它的css更具竞争力.