how to create dynamic classes in tailwind typescript react

1const classes = {
2  wrapper: 'border-2 m-16 p-16 text-center',
3  title: 'text-gray-800 text-xl font-bold',
4  description: (active) =>
5    `my-6 ${active ? 'text-red-900 font-medium' : 'text-gray-800'}`,
6  button: 'py-2 px-4 bg-gray-100 border-2 focus:outline-none',
7  buttonActive: 'bg-gray-400',
8};
9
10const AdvancedComponent = () => {
11  const [active, setActive] = useState(false);
12
13  return (
14    <div className={classes.wrapper}>
15      <h1 className={classes.title}>Advanced Component</h1>
16      <p className={classes.description(active)}>
17        I change based on the button click state.
18      </p>
19      <button
20        className={clsx([classes.button, active && classes.buttonActive])}
21        onClick={() => setActive((prevState) => !prevState)}
22      >
23        Click Me
24      </button>
25    </div>
26  );
27};