Using Tailwind

[mawnir]

I'm customizing the Tree with my own setup, but I'm not sure how to style it using TailwindCSS.

                      <Tree
                        data={treeData}
                         ...
                        paddingBottom={32}>
                        {Node}
                    </Tree>
function Node({ node, style, dragHandle }: NodeRendererProps<noteType>) {
...
  return (
        <div
            ref={dragHandle}
            style={style}
            className={clsx(styles.node, node.state, "group/node")}
            onClick={openNote}>
            ....

i'm using (like the demo) this css:

[role="treeitem"]:has(.node) {
    color: white;
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    user-select: none;
}

[role="treeitem"]:has(.node):focus-visible {
    background-color: #eaeaea;
    outline: none;
}

[role="treeitem"][aria-selected="true"]:has(.node):focus-visible {
    background-color: #eaeaea;
    outline: none;
}

[role="treeitem"][aria-selected="true"] .node {
    color: #171717
}
...

[CHE1RON]

How about passing your own rowRenderer (as prop) and node (as child of Tree) and style them using TailwindCSS directly? 🤔

[mawnir]

what i did is to bring the css to the Node like this, its messy but it works:

function Node({ node, style, dragHandle }: NodeRendererProps<noteType>) {
    const isReceivingDrop = node.state.willReceiveDrop;  
    const isFocused = node.state.isFocused; 
    const isSelected = node.state.isSelected;  
    ...
  return (
        <div
            ref={dragHandle}
            style={style}
            className={`group/node ${node.state}  hover:bg-sidebar-accent cursor-pointer ml-1 flex items-center h-full leading-[20px] ${isReceivingDrop ? 'bg-blue-100 border border-dashed border-blue-100' : ''
                } ${isFocused || isSelected ? 'bg-sidebar-accent font-normal  border-blue-500/30' : 'font-light'} `}
            onClick={openNote}>
            <div className="flex items-center ml-1 text-gray-700 h-full leading-[20px] dark:text-white">
                <span>{node.isEditing ? <Input node={node} /> : node.data.title}</span>
            ...