Tailwind style like className but in props

[ShalltearFR]

Hello,
I would like to know if it is possible to type a props with any tailwind value.
I do some tests and I have a component like this:

<Header
  xs="relative h-auto mr-5"
  md="text-center"
  lg="mr-0"
>

I just wish the IDE could offer me all tailwind styles exactly like className but in xs, md and lg.
I tried to base myself on this without success :

import { createTools, type Tailwindest } from "tailwindest"
 
/**
 * Custom type definition of tailwindest
 * @see {@link https://tailwindest.vercel.app/apis/Tailwindest api reference}
 */
type TailwindCustom = Tailwindest<{}, {}>
/**
 * Full type definition of `tailwindcss`
 */
type Tailwind = Required<TailwindCustom>
 
const tw = createTools<TailwindCustom>()
 
export { tw, type Tailwind }

[ShalltearFR]

after some research on the plugin vs code side, I saw that we could add the style in the Tailwind CSS IntelliSense settings.

[danpacho]

Yes by adding tailwind class attributes, you can get attributes. But if you want whole tailwind class as typescript type, then you can do it like this.

import { Tw } from "your_tailwindest_type_src"
type TailwindClassName = Tw[keyof Tw]
// "bg-red-50" | "bg-red-100" | ... all the properties of tailwindcss