Styling checkbox with Tailwind not working

I have a checkbox in my Next project and after added some styles nothings happens except changes in width, height and cursor. But color, bg, border, etc. doesn't work.

<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>

h-8 and w-8 are the only two tailwind classes that actually work in the checkbox (and cursor pointer too), color still default blue, no ring appears on focus, bg still white. Others elements in the example code like p, div and h1 are working perfect