Styling with Tailwind CSS

The default parts are restyled with class names. Classes that conflict with a default (such as the checkbox size) win, because the default styles are in a lower-priority cascade layer.

Root 1▲

Root 2▲

Show code

StylingExample.tsx

import TreeSelect from '@attebyte/react-tree-select';
import { exampleData, ExampleNode } from './data';

// Class names override the defaults, which live in a lower-priority cascade layer
export default function StylingExample() {
  return (
    <TreeSelect<ExampleNode>
      defaultData={exampleData}
      uniqueIDProperty='value'
      labelProperty='label'
      childrenProperty='children'
      valueProperty='included'

      className='bg-neutral-800 text-white p-6 rounded font-sans'
      inputClassName='checked:text-blue-500 text-orange-600 h-8 w-8 after:text-2xl'
      labelClassName='font-bold text-4xl'
      iconClassName='text-neutral-500'
      aria-label='Styling example'
    />
  );
}

The checkbox is drawn with a ::after pseudo-element, so after: variants (like after:text-2xl) size the check mark. See Customization for every styling prop.