Tailwind "Checked" modifier not applying on Checkbox check

[cill-i-am]

So i've got a checkbox that i'm trying to style via tailwind. The only issue is that tailwinds checked modifier isn't applying on check. It works using the standard <input type="checkbox" /> however. I know I can hook in to the "checked" state, but i would like to avoid js for this if at all possible

'use client';

import * as React from 'react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { FaCheck } from 'react-icons/fa';

import { cn } from '../../lib/utils';

const Checkbox1 = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    onCheckedChange={(checked) => {
      console.log('checked', checked);
    }}
    className={cn(
      'peer h-6 w-6 shrink-0 rounded-lg border border-gray-300 hover:border-yonder-300 checked:bg-yonder-500 checked:border-yonder-500 focus:outline-none focus:ring-2 focus:ring-yonder-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn('flex items-center justify-center')}
    >
      <FaCheck className='h-4 w-4' />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
));
Checkbox1.displayName = CheckboxPrimitive.Root.displayName;

export { Checkbox1 };

[benoitgrelard]

Hey @Rocinante89 you should be able to target the data-state attribute natively in tailwind using arbitrary data attributes syntax: https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes

[cill-i-am]

@benoitgrelard thank you so much 👍 I knew I was missing something simple

[hmdegroot]

data-[state=checked]:bg-green-700
data-[state=checked]:border-green-700
data-[state=checked]:hover:bg-green-500
data-[state=checked]:hover:border-green-500

Works for me.