using --tree-item-level to syle Tree indentation with tailwind

[Callumk7]

Hey,

I am trying out the new beta Tree component, but I am struggling to use the --tree-item-level css variable to add left padding dependent on the tree level.

I have a first pass at a wrapper component like this:

function Tree<T extends object>({ className, ...props }: AriaTreeProps<T>) {
	return (
		<AriaTree
			className={composeRenderProps(className, (className) =>
				cn(
					className,
					"group overflow-auto w-full p-1 text-popover-foreground outline-none",
				),
			)}
			{...props}
		/>
	);
}

interface TreeItemProps<T> extends AriaTreeItemProps<T> {
	itemChildren: T[] | undefined;
	renderFunction: (item: T) => JSX.Element;
}
const TreeItem = <T extends object>({
	className,
	children,
	itemChildren,
	renderFunction,
	...props
}: TreeItemProps<T>) => {
	return (
		<AriaTreeItem
			className={composeRenderProps(className, (className) => cn("pl-[calc(var(--tree-item-level) * 20px)]", className))}
			{...props}
		>
				<AriaTreeItemContent>{children}</AriaTreeItemContent>
				<Collection items={itemChildren}>{renderFunction}</Collection>
		</AriaTreeItem>
	);
};

const TreeItemContent = AriaTreeItemContent;

export { Tree, TreeItem, TreeItemContent };

But, this isn't having an effect.

I can use data-[level=1]:pl-3, data-[level=2]:pl-5, but obviously the CSS var is ideal. Im sure this is a tailwind skill issue on my end, so would appreciate a tailwind example if possible to show me where I am going wrong!

Thanks in advance

[reidbarber]

I think you may just need to remove the space in the calc function (specific to Tailwind). Try this: pl-[calc(var(--tree-item-level)*20px)]

[Callumk7]

That will do it 😅

thanks!