我在我的Next.js项目中有一个复选框,在添加了一些Tailwind实用类之后,除了宽度、高度和光标的更改外,没有任何效果。颜色、背景、边框等都不起作用。
<div className="flex py-4 m-auto w-2/3 justify-between items-start">
<div className="w-1/7">
<div className="border-b pb-4">
<h1 className="mb-2 font-medium">Filter 1</h1>
<label htmlFor="c1">
<div className="flex group active:ring-2 ring-black rounded">
<input
id="c1"
type="checkbox"
className="rounded-full h-8 w-8 cursor-pointer bg-red-100 border-red-300 text-red-600 focus:ring-red-200"
/>
<p className="pl-2 text-reg cursor-pointer group-hover:underline decoration-solid">
Subfilter 1
</p>
</div>
</label>
</div>
</div>
</div>
cursor-pointer
、h-8
和 w-8
是唯一在复选框中有效的实用类。 color
仍然默认为蓝色,没有焦点时不会出现环形,bg
仍然是白色。
示例代码中的其他元素,如 p
、div
和 h1
都能正常工作。