Change classNames function to inline variables

[rvanrees]

Hello,

I think it would be great to replace all the classNames functions in the components to inline variables.

Replace this:

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

With: (example) <p className={`${active ? "bg-gray-50" : ""} text-sm leading-6 text-gray-900`}

What do you think?

[RobinMalfait]

Hey!

I'm assuming you are talking about the code snippets we provide in Tailwind UI?

You can totally do that for your own projects if you want, but we added it because a lot of people in the JS community use something like classNames or clsx.

Another small reason to do it is if you look at your example, and your component is not active, then the class will have a leading space in the DOM: <p class=" text-sm leading-6 text-gray-900">.

I think we will keep it as-is for now, but once you copy the code in your project its yours so you can make that change if you want 👍

Hope this helps!