小编Cés*_*cia的帖子

我的 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运行良好。