Creating a Vue 3 Component library with Vite and Tailwind | Vite Land | Page 1

Hi, i'm trying to create a Vue 3 component library using Vue 3 with Tailwind for the CSS. I'm having an issue when I build the package but it doesn't export any of the CSS. When I import the component (a button) into my app, I don't see the button, just the text. I want to be able to reference the styles within my app without having to redefine them.

The content of the vite.config.ts is below.

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

import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'sample-library',
      fileName: (format) => `sample-library.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
  plugins: [vue(), dts()],
});

And the package.json extract:

 "main": "./dist/plannr-ui.umd.js",
  "module": "./dist/plannr-ui.es.js",
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "import": "./dist/plannr-ui.es.js",
      "require": "./dist/plannr-ui.umd.js"
    },
    "./dist/index.css": "./dist/index.css",
    "./dist/tailwind.config.js": "./tailwind.config.js"
  },

Does anyone know how I can export the css and tailwind config so that it can be referenced in the Application that this plugin will be imported into?

Thank you very much

#Creating a Vue 3 Component library with Vite and Tailwind