[&&]增加了类的特殊性，但你不应该依赖它，因为你永远不知道与第三方组件的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将显示如下：（为了更好地演示，我已经使边界半径和颜色更显着）

的数据
您可以使用[&>*]来选择这两个组件，或者如果您有其他组件封装在TextField.Root下，则可以指定[&>input]和[&>.rt-TextFieldChrome]：

<TextField.Root className="[&>*]:!rounded-[50px] [&>*]:!border-solid">
    <TextField.Input className="!h-[57px]" placeholder="Search the docs…"/>
</TextField.Root>

型

什么是[&&]以及它为什么工作？

在tailwind中使用&是针对任意变体，其中&表示被修改的选择器。
首先，让我们以文档[&:nth-child(3)]:underline为例来解释它是如何工作的。在这里，&将被当前选择器（类名[&:nth-child(3)]:underline和一堆转义字符\，以避免保留的css关键字）和前面的一个点替换，生成如下内容：

/* 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]，每个&将被替换为一个点和当前选择器（类名[&&]:h-[57px]），因此生成的选择器将是.[&&]:h-[57px].[&&]:h-[57px]，它选择类为[&&]:h-[57px]和[&&]:h-[57px]的所有元素。
虽然选择同一个类两次并不会对选择的元素产生影响，但由于现在在这个CSS声明中包含了两个类选择器，它的类列的特异性从1增加到2，使其更具竞争力。