如何使用Vite和Tailwind构建Vue组件库？（在导入其他项目时，Tailwind类无法正常工作）

Question

当前

我有两个代码库：

• 主要 Web 应用程序 - 简单的 nuxt3 web 应用程序
• 组件库 - 简单的 vite/vue 应用程序

目标

使用 vite、vue3 和 tailwindcss 构建自己的组件库

问题

当我使用 npm run dev 时，我的组件可以正常工作 (来自 vite 应用程序)，但是当我构建我的库 npm run build:watch 并在另一个项目中导入它们 (nuxt 应用程序) 时，tailwind 类和样式不起作用。

这是我的 vite 应用程序 (一切正常)

这是我导入组件的 nuxt 应用程序 (没有样式)

---

代码库：

• 主要 Web 应用程序：https://github.com/fro-systems/clau-web
• 组件库：https://github.com/fro-systems/clau-components

- Francisco Ramos

Answer 1

将此添加到 vite-library 的 package.json

"exports": {
    "./dist/style.css": "./dist/style.css"
  },

并将其添加到nuxt.config.ts文件中。

css: [
  "clau-components/dist/style.css"
],

问题在于我没有添加样式。

- Francisco Ramos

---

我可以问一下是否有方法可以不需要在主项目中显式导入CSS来修复这个问题（在这种情况下，是在nuxt.config.ts文件中）？因为如果我们有很多自定义库，那么导入打包的CSS将需要大量的手动工作。请告诉我是否应该发布一个单独的问题。 - Beast

你能在不显式导入到主项目的情况下解决这个问题吗？ - Michael