Tailwind CSS TS环境下withOpacity函数失效及类型错误求助

我想基于Tailwind CSS实现可切换的多主题变体，参考了Tailwind Labs的JS实现教程，但在TypeScript环境中遇到了问题：自定义的withOpacity函数无法正常渲染颜色，直接用var()引用CSS变量却能生效，同时还出现了TypeScript类型错误和CSS语法错误。

相关代码 #

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --primary-color: #847869;
    --secondary-color: #fae1c3;

    --primary-background-color: #202020;
    --secondary-background-color: #1d1d1d;
    --accentColor: #91170c;

    --robotoMono: "Roboto Mono", monospace;
    --barlow: "Barlow", sans-serif;
  }
}

html {
  scroll-behavior: smooth;
}

.container {
  width: 50%;
  margin: 0 auto;
}

tailwind.config.ts

import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";

function withOpacity(variableName: string) {
  return ({ opacityValue }: { opacityValue: number | undefined }): string => {
    if (opacityValue !== undefined) {
      return `rgba(var(${variableName}), ${opacityValue})`;
    }
    return `rgb(var(${variableName}))`;
  };
}

export default {
  content: ["./src/**/*.tsx"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      textColor: {
        skin: {
          base: "var( --primary-color)",
          // muted: withOpacity('--color-text-muted'),
          // inverted: withOpacity('--color-text-inverted'),
        },
      },
      backgroundColor: {
        skin: {
          withOpacity("--primary-background-color")
          // fill: withOpacity("--primary-background-color") as unknown as string,
          // 'button-accent': withOpacity('--color-button-accent'),
          // 'button-accent-hover': withOpacity('--color-button-accent-hover'),
          // 'button-muted': withOpacity('--color-button-muted'),
        },
      },
      gradientColorStops: {
        skin: {
          // hue: withOpacity('--color-fill'),
        },
      },
    },
  },
  plugins: [],
} satisfies Config;

报错信息 #

TypeScript错误

Type '(: any) => any' is not assignable to type 'string | RecursiveKeyValuePair<string, string>'.ts(2322)

CSS语法错误

⨯ ./src/styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./src/styles/globals.css
SyntaxError: Unexpected token (29:23)
Import trace for requested module:
./src/styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./src/styles/globals.css
./src/styles/globals.css

解决步骤 #

1. 修复Tailwind配置中的语法错误
   在backgroundColor.skin里，你直接调用了withOpacity("--primary-background-color")但未指定键名，这是无效的对象语法，必须写成键值对形式：

   backgroundColor: {
     skin: {
       fill: withOpacity("--primary-background-color"),
     },
   },
   

2. 将CSS变量改为RGB格式
   withOpacity函数返回的是rgb(var(--xxx))或rgba(var(--xxx), opacity)，但当前CSS变量是十六进制值，会导致解析失败。把:root里的颜色变量改成逗号分隔的RGB数值：

   :root {
     --primary-color: 132, 120, 105; /* 对应#847869 */
     --secondary-color: 250, 225, 195; /* 对应#fae1c3 */
   
     --primary-background-color: 32, 32, 32; /* 对应#202020 */
     --secondary-background-color: 29, 29, 29; /* 对应#1d1d1d */
     --accentColor: 145, 23, 12; /* 对应#91170c */
     /* ...其他变量 */
   }
   

3. 修正TypeScript类型问题
   Tailwind传递的opacityValue实际是字符串类型（比如"0.5"），之前的number类型会导致不匹配，调整函数参数类型：

   function withOpacity(variableName: string) {
     return ({ opacityValue }: { opacityValue?: string }) => {
       if (opacityValue) {
         return `rgba(var(${variableName}), ${opacityValue})`;
       }
       return `rgb(var(${variableName}))`;
     };
   }
   

4. 统一textColor的写法
   为了支持透明度控制，textColor.skin.base也改用withOpacity函数：

   textColor: {
     skin: {
       base: withOpacity("--primary-color"),
     },
   },
   

完成以上修改后，withOpacity函数就能正常工作，同时类型错误和CSS语法错误也会被修复。

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