如何在TypeScript中使用Daisy UI颜色（非工具类）

Daisy UI的颜色是注入到Tailwind CSS主题系统中的，要在TypeScript里直接访问这些颜色值，有几种实用方案：

方案1：从Tailwind配置导出颜色 #

Daisy UI会把主题颜色合并到Tailwind的theme.colors中，你可以直接导出配置里的颜色供TS使用：

1. 确保你的tailwind.config.js正确配置了Daisy UI：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark"], // 启用的主题列表
  },
};

2. 创建一个colors.ts文件，导入并提取颜色：

import tailwindConfig from './tailwind.config';

// 提取Daisy UI的颜色集合，默认取配置中启用的主题颜色
export const daisyColors = tailwindConfig.theme?.colors as Record<string, string>;

3. 在TS中直接使用：

const cardBackgroundColor = daisyColors['base-100'];
const primaryButtonColor = daisyColors['primary'];

方案2：用Tailwind的resolveConfig获取完整主题（更准确） #

如果需要包含所有Daisy UI动态生成的主题细节，用Tailwind官方的resolveConfig工具解析完整配置：

1. 先安装必要的类型依赖（如果没装）：

npm install @types/tailwindcss --save-dev

2. 创建工具文件utils/daisyColors.ts：

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../tailwind.config';

// 解析完整的Tailwind+Daisy UI配置
const fullTailwindConfig = resolveConfig(tailwindConfig);

// 导出所有Daisy UI颜色，包含类型提示
export const daisyColors = fullTailwindConfig.theme.colors as Record<string, string>;

3. 使用方式和方案1一致，这个方法能确保拿到的是最终生效的主题颜色（包括自定义修改的Daisy UI主题）。

方案3：通过CSS变量动态获取（适配主题切换） #

Daisy UI会把所有主题颜色注册为全局CSS变量（比如--base-100、--primary），适合需要响应主题切换的场景：

// 定义工具函数获取指定的Daisy UI颜色
const getDaisyColor = (colorKey: string): string => {
  return getComputedStyle(document.documentElement)
    .getPropertyValue(`--${colorKey}`)
    .trim();
};

// 使用示例
const base100 = getDaisyColor('base-100');
const secondaryColor = getDaisyColor('secondary');

当用户切换主题时，这个方法会自动返回当前主题对应的颜色值。

优化类型提示（可选） #

为了让TS有更精准的颜色键提示，可以自定义类型：

// 列出你常用的Daisy UI颜色键
type DaisyColorKey = 
  'base-100' | 'base-200' | 'base-300' |
  'primary' | 'primary-focus' | 'primary-content' |
  'secondary' | 'secondary-focus' | 'secondary-content' |
  'accent' | 'accent-focus' | 'accent-content';

// 修改导出的类型
export const daisyColors = fullTailwindConfig.theme.colors as Record<DaisyColorKey, string>;

这样在输入daisyColors.时，TS会自动弹出可用的颜色选项。

内容的提问来源于stack exchange，提问作者Walderdbeerenflocken