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

user_19008714 0
Viewed 1721

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)

Vite App with a red button

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

Nuxt App with the smae button but no color

Repositories:

vite nuxt.js tailwind-css vue.js
1 Answers

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

user_190087140
Related