Vue3+Vite项目引入设计系统后Tailwind CSS类不生效问题

我用Vite创建了两个Vue 3项目：一个是设计系统，另一个是使用该设计系统的主项目，分属不同代码仓库。
主项目通过package.json添加依赖引用设计系统：

"design-system": "bitbucket:repository-url#main",

两个项目的devDependencies都包含"tailwindcss": "^3.4.1"。

组件导入正常，但TailwindCSS出现异常：

• 从设计系统导入<Component A/>，它包含类bg-primary，该类在两个项目的配置中都存在，但一开始不生效；
• 手动在主项目创建<div class="bg-primary"></div>后，这个div和<Component A/>中的bg-primary类都会生效。

我的配置如下：

style.css（Tailwind导入） #

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

main.ts（样式导入） #

import App from './App.vue';
import './style.css';
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import router from "./router/index";

const app = createApp( App );
   
app.use( PrimeVue ).use( router ).mount( '#app' );

postcss.config.js #

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    colors: {
      transparent: 'transparent!important',
      'FAFAFA': 'green!important',
      'primary': '#004E60',
      'primary-darker': "#14323F",
      'secondary': '#50CFC9',
      "001B21": '#001B21',
      'white': "#ffffff",
      'F8F9FA': "#F8F9FA",
      'E3E3E3': "#e3e3e3",
      '8292A6': '#8292A6',
      '007995': '#007995',
      'DCDCDC': '#DCDCDC',
      'E2E8F0': '#E2E8F0',
      'CACACA': '#cacaca',
      'danger': 'red'

    },
    fontFamily: {
      'sans': ['Poppins'],
      'serif': ['Poppins'],
      'mono': ['Poppins'],
      'display': ['Poppins'],
      'body': ['Poppins'],
    },
    fontSize: {
      esm: '0.7rem',
      sm: '0.9rem',
      base: '1rem',
      xl: '2.25rem',
      '2xl': '2.2rem',
      '3xl': '3.953rem',
      '4xl': '4.441rem',
      '5xl': '5.052rem',
    },
    screens: {
      'esm': '300px',
      'sm': '459px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
    extend: {
      width: {
        '100': '100px',
        '270': '270px',
      },
      height: {
        '50': '50px',
        '88': '88px',
      },
      inset: {
        '100': '100px',
        '270': '270px',
      },
      borderRadius: {
        'exl': '26px'
      },
      boxShadow: {
        '3xl': '0px 8px 8px 0px rgba(202, 202, 202, 0.20)',
      }
    }
  },
  plugins: [],
};

这个问题的核心是Tailwind的JIT引擎没有扫描到设计系统组件中的类名，初始构建时不会生成对应的CSS规则；当你在主项目源码中添加bg-primary类后，Tailwind扫描到该类并生成CSS，此时设计系统组件里的同类名也会匹配生效。

解决步骤如下：

1. 修改主项目的tailwind.config.js #

在content数组中添加设计系统组件的路径，让Tailwind扫描到这些文件中的类名：

content: [
  "./index.html",
  "./src/**/*.{vue,js,ts,jsx,tsx}",
  "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}",
  // 添加设计系统组件路径，根据实际包结构调整
  "./node_modules/design-system/**/*.{vue,js,ts,jsx,tsx}"
],

如果设计系统的组件集中在src/components目录下，也可以写./node_modules/design-system/src/**/*.vue。

2. 可选：设计系统侧优化 #

若设计系统和主项目共用Tailwind配置，建议将Tailwind配置抽成独立包，或让设计系统依赖主项目的Tailwind配置，避免两边重复定义主题（如primary颜色），减少维护成本。

3. 重启主项目开发服务 #

修改配置后，重启Vite开发服务，让Tailwind重新扫描所有指定路径的文件，生成完整的CSS规则。

处理后，设计系统组件中的bg-primary类会在初始构建时就被Tailwind识别并生成对应CSS，无需手动添加同类名触发。

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