Tailwind CSS 类的 Typescript 类型

Question

Tailwind CSS 类的打字稿类型是否存在于任何地方？

我正在尝试将一些顺风类作为 prop 传递给 React 组件，并希望正确键入它。

Answer 1

我也无法在任何地方找到类型定义，所以我这样做是为了解决这个问题。我的目标是能够从顺风获得智能感知，这对我有用......

/* 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']

应用示例...

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

Answer 2

有一个包提供了tailwindcss的classname类型。 一探究竟。

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"  ...