使用Vite+React-SWC导入Tailwind配置到TSX文件报错求助

错误点1：属性拼写错误 #

你代码里的 cssConfig?.theme?.color['accent'] 存在拼写错误——应该是 colors 而非 color（少了末尾的s）。这会导致读取不到accent颜色值，甚至可能触发未定义报错。

错误点2：Vite中CommonJS模块导入问题 #

你的tailwind.config.cjs是CommonJS格式的配置文件，在Vite+TypeScript项目中直接导入CJS模块可能会出现解析问题，这也是浏览器报错的核心原因之一。Vite默认更倾向于ES模块，对CJS的导入需要额外处理。

解决步骤 #

1. 修正拼写错误

修改PageStats.tsx中的颜色读取代码，同时用更安全的可选链简化逻辑：

let accent = "#8884d8";
// 简化写法，自动处理未定义情况
accent = cssConfig?.theme?.colors?.accent || "#8884d8";

2. 将Tailwind配置改为ES模块格式（推荐）

把tailwind.config.cjs重命名为tailwind.config.js（或tailwind.config.ts），并修改导出语法为ES模块：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "./public/*.svg"],
  theme: {
    extend: {
      keyframes: {
        gradient: {
          '0%, 100%': { 'background-size': '400% 400%', 'background-position': '0% 50%' },
          '50%': { 'background-size': '200% 200%', 'background-position': '100% 50%' },
        },
      },
      animation: {
        gradient: 'gradient 7s ease infinite',
      },
      boxShadow: {
        'outline': '0 0 8px 2px rgba(0, 0, 0, 0.5)',
      },
      colors: {
        'primary': '#0F172A',
        'secondary': '#181E41',
        'tertiary': '#2C2F54',
        'pop': '#FFCDB2',
        'pop-2': '#ff9090',
        'accent': '#574AE2',
        'success': '#2F9C95',
        'warning': '#F2CD5D',
        'danger': '#FF1053',
        'info': '#4465FF', 
      },
      borderRadius: {
        'ce': '12px'
      }
    }
  },
  plugins: []
};

之后在PageStats.tsx中更新导入路径：

import tailwindConfig from "../../tailwind.config.js";

3. （可选）优化TypeScript类型提示

为了让TS更好地识别配置结构，给resolveConfig的返回值添加类型断言：

import type { Config } from 'tailwindcss';
const cssConfig = resolveConfig(tailwindConfig) as Config;

4. 重启开发服务器

修改完成后，重启Vite开发服务器，浏览器的报错会消失，同时能正确读取到自定义的accent颜色值。

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