How to build vue component library with vite and tailwind? (tailwind classes not working when importing to other project)

Question

Current

I have two repositories:

• Main Web App - simple nuxt3 web app
• Component Library - simple vite/vue app

Goal

Build my own component library using vite, vue3 and tailwindcss

Problem

When I use npm run dev I can se my components working fine (from the vite app) but when I build my library npm run build:watch and import them in another project (nuxt app) tailwind classes/styles are not working

This is mi vite app (all good)

This is the nuxt app where I imported the component (no style)

---

Repositories:

• Main Web App: https://github.com/fro-systems/clau-web
• Component Library: https://github.com/fro-systems/clau-components

Answer 1

Adding this to package.json on the vite-libray

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

And addin this nuxt.config.ts

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

The issues was that I wasn't adding the styles