Adding more selectors
Example: Add font-bold
class name:
Live Editor
// Button.tsximport { ClassNameProp, resolveClassName } from '@unwind/class-name';import { memo, PropsWithChildren } from "react";const buttonClassName = ['bg-gray-50 hover:bg-white active:bg-gray-200','border border-gray-300 rounded','py-2 px-4',]type ButtonProps = PropsWithChildren<{className?: ClassNameProp<typeof buttonClassName>}>const Button = memo<ButtonProps>(({ children, className }) => (<button className={resolveClassName(null, buttonClassName, className)}>{children}</button>))// App.tsxfunction App() {return (<ButtonclassName="font-bold">Click me!</Button>)}
Result
Loading...