Html Tailwind CSS 复选框样式不起作用

我在我的Next.js项目中有一个复选框，在添加了一些TailWind实用程序类后，除了对宽度、高度和光标的更改外，什么都不会生效. colored颜色 、BG、边框等不起作用.

        <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都工作得很好.