How to add specific styles to className in Tailwind

Question

I am passing a style to a checkbox when it is checked, but I do it in my tailwind.css file.

I am wondering if it is possible somehow to do it in className inline, because I do not want really to add many global styles to tailwind.css.

So here's the component so whenever I check it adds an SVG instead of default checkbox:

            <input
                key={color}
                type="checkbox"
                className="peer hidden input:checked"
                name="checkbox-colors"
                checked={isChecked === color}
                value={color}
                onClick={(e) => {
                  handleColorChange(e.currentTarget.value);
                }}
                readOnly
              />
              <div className="h-full w-full flex justify-center items-center">
                <CheckIcon className="hidden" />
              </div>

and the styles are these:

input:checked + div svg {
  @apply block;
}

so if it is possible somehow to use it in input className="peer hidden input:checked..."

Answer 1

Actually found a way around of using cn of @classNames and doing it like that:

<div className="h-full w-full flex justify-center items-center">
                <CheckIcon
                  className={cn({
                    hidden: isChecked !== color,
                  })}
                />
              </div>

and works like a charm!