我在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）工作正常。