在尾风 CSS 中获取颜色属性

profile image

获取您在 Tailwind CSS 中设置的颜色类型！

TailwindCSS

本帖由 DeepL 翻译。如有任何翻译错误，请告知我们！

在创建图标组件时，我们希望将与颜色相关的属性作为道具添加到 className 中。

图标是由 SVG 组成的，与其手动指定填充和描边值，我希望使用 Tailwind CSS 的自动完成功能来为 className 着色。

例如，我想编写以下代码

typescript
接口 IconProps {
  fill: string；
  stroke: string；
}
const Icon = ({fill, stroke}: IconProps) => {
  <svg className={`${fill} ${stroke}`} />
}

为了利用 tailwind 的自动完成功能，我们需要赋予fill和stroke不同的类型，而不是字符串，也就是说，我们需要获取在 tailwind 中设置的颜色类名称。

提取类型

首先，我们可以从 tailwind 中获取默认颜色信息

typescript
从 "tailwindcss/colours "导入 defaultColors；
导出类型 DefaultColors = keyof typeof defaultColors；

const color: DefaultColors = "blue

Image.png

但是，只有颜色键会自动完成，后面没有提供属性。(蓝色会自动完成，但不是blue-500，等等）。

接下来，让我们导入 tailwind 的完整配置

typescript
import resolveConfig from "tailwindcss/resolveConfig"；
import tailwindConfig from "web/tailwind.config.ts"; // tailwind 配置文件

const fullConfig = resolveConfig(tailwindConfig)；

我们可以从fullConfig获取以下信息

Image.png

让我们结合上述信息创建一个名为 ColorShade的新类型

typescript
type ColourShade<T extends DefaultColours> = keyof ColourConfig[T] extends
  | 字符串
  | 数字
  * keyof ColourConfig[T] extends | string | number
  : never；

const shade: ColourShade<'blue'> = '500'

Image.png

现在，我们还可以获取颜色之后的属性。

结合起来，我们可以提取出一个结合了颜色和亮度的名称。

typescript
类型 TailwindColourClass = {
  [P in DefaultColours]：ColorShade<P> extends never ? P ：`${P}-${ColourShade<P>}`；
}[DefaultColours]；

Image.png

应用

现在，让我们为 fill 创建一个可以在 fill 中使用的 className，为 stroke 创建一个只能在 stroke 中使用的 className，这正是我想要的。

typescript
接口 IconProps {
  fill：`fill-${TailwindColourClass}`；
  stroke：`storke-${TailwindColourClass}`；
}

Image.png

应用自定义颜色

上述代码的问题在于，它只导入了 tailwind 的默认颜色，而没有导入自定义颜色。

分离自定义颜色

首先，让我们将自定义颜色分离到一个变量中。

typescript
const color = {
  ... formalColours、
  ...keyColours、
  ... 重点颜色
  ...grayColour、
  ...主题颜色
}

让我们创建以下类型来代替上面使用的DefaultColors

typescript
type CustomColors = typeof color；
type DefaultColors = typeof defaultColors；
导出类型 Colors = CustomColors & DefaultColors；

最终代码

tailwin.config.ts

typescript
类型 CustomColors = typeof color；
导出类型 DefaultColours = typeof defaultColours；
导出类型 Colors = CustomColors & DefaultColors；

组件.tsx

typescript
const fullConfig = resolveConfig(tailwindConfig)；
const colorTheme = fullConfig.theme.colors as Colors；
type ColorConfig = typeof colorTheme；
type ColorKeys = keyof Colors；

type ColorShade<T extends ColourKeys> = keyof ColourConfig[T] extends
  | 字符串
  | 字符串
  | | 数字
  : never；


类型 TailwindColourClass = {
  [P in ColourKeys]：ColorShade<P> extends never ?`${P}-${ColourShade<P>}`；
}[ColourKeys]；



接口 IconProps {
  fill：`fill-${TailwindColourClass}`；
  stroke：`storke-${TailwindColourClass}`；
}
❤️ 0
🔥 0
😎 0
⭐️ 0
🆒 0