基于Vite+Tailwind的Vue组件库样式丢失问题求助

我们正在开发一个基于TailwindCSS的可复用Vue组件库，未将Tailwind打包进库中，需消费应用自行安装并配置Tailwind。但将该库导入消费应用后，组件上引用的部分Tailwind类（如pr-3）虽能在HTML元素中看到，却没有对应的样式生效，仅部分样式可正常应用。

效果对比 #

• 组件在库项目中的预期显示效果：
  

• 在消费应用中的实际显示效果：
  

• HTML元素类引用检查：可见pr-3类已被元素引用，但无关联样式
  

相关配置代码 #

库项目Vite配置 #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/libs/index.js'),
      name: 'uipack',
      fileName: (format) => `uipack.${format}.js`
    },
    target: 'esnext',
    rollupOptions: {
      external: ['vue', 'tailwindcss', '@tailwindcss/aspect-ratio', '@tailwindcss/forms', '@tailwindcss/typography'],
      output: {
        exports: 'named'
      }
    }
  }
})

库插件注册代码 #

import * as components from './components'

const uipack = {
  install(app) {
    Object.keys(components).forEach((name) => {
      app.component(name, components[name])
    })
  }
}

export default uipack

库项目TailwindCSS配置（未被组件直接导入，也未加入Vite构建流程） #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/libs/**/*.{html,vue,js}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Raleway', 'sans-serif']
      }
    }
  },
  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/forms')]
}

消费应用TailwindCSS配置 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Raleway', 'sans-serif']
      }
    }
  },
  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/forms')]
}

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