Typescript types for Tailwind CSS classes

Question

Do typescript types for Tailwind CSS classes exist anywhere?

I'm trying to pass some tailwind classes as a prop to a React component, and want to type it properly.

Answer 1

I also couldn't find a type definition anywhere, so I did this as a work around. My goal was to be able to get the intellisense from tailwind, and this worked for me...

/* This returns the interface object of all props/attributes on a jsx div element */
React.ComponentProps<'div'>

/* Then this would get the types on the className attribute */
React.ComponentProps<'div'>['className']

Example application...

interface Props {
  className?: React.ComponentProps<'div'>['className'];
}

Answer 2

There is a package that provides the classname type of tailwindcss. Check it out.

type TailwindColor = Tailwindest["color"]

// becomes
//`text-[${string}]` | "text-slate-100" | "text-slate-200" | "text-slate-300" | "text-slate-500" | "text-slate-700" | "text-slate-50" | "text-slate-400" | "text-slate-600" | "text-slate-800"  ...