如何在TailwindCSS配置的自定义关键帧中引用DaisyUI主色调？

要在自定义关键帧中引用DaisyUI的主色调，让颜色随主题自动同步，你可以利用Tailwind配置中的theme函数直接访问DaisyUI注入的主题颜色变量，具体实现如下：

步骤1：修改Tailwind配置文件 #

在tailwind.config.js中，通过theme回调函数获取DaisyUI的主色调（默认标识为primary），结合Tailwind的颜色透明度语法替换硬编码的RGBA值：

module.exports = {
  // 保留原有基础配置（content、theme.base等）
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['light', 'dark'], // 你的主题列表，可按需添加自定义主题
  },
  theme: {
    extend: {
      keyframes: ({ theme }) => ({
        'grow-right-shorten-left': {
          '0%': { boxShadow: `30px 0px 100px -80px ${theme('colors.primary / 40%')}` },
          '50%': { boxShadow: `30px 0px 100px -60px ${theme('colors.primary / 40%')}` },
          '100%': { boxShadow: `30px 0px 100px -80px ${theme('colors.primary / 40%')}` },
        },
      }),
      // 可选：定义对应的动画类名，方便在HTML中直接调用
      animation: {
        'grow-shorten': 'grow-right-shorten-left 2s ease-in-out infinite',
      },
    },
  },
};

关键说明 #

• theme('colors.primary / 40%')：Tailwind支持直接在颜色变量后追加/ 透明度百分比生成对应RGBA值，这里的40%对应你原硬编码的0.4透明度。
• DaisyUI会自动将当前激活主题的主色调注入Tailwind的colors系统，theme('colors.primary')会实时获取当前主题的主色调值。
• 切换DaisyUI主题时，关键帧中的阴影颜色会自动同步更新，无需手动修改硬编码值。

验证方法 #

在HTML元素上添加你定义的动画类名（比如animate-grow-shorten），切换DaisyUI主题，观察阴影颜色是否随主题主色调变化即可。

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