Tailwind css not working in Vue web component-CodePudding

I have a Vue web component. When I build it as a normal Vue component everything worked fine. However, it lost all the Tailwind styling immediately I converted it to a Vue Web Component. Thanks for your help in advance.

tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
      },
    },
  },
  plugins: [
  ],
}

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

and my vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        // treat all tags with a dash as custom elements
        isCustomElement: (tag) => tag.includes('-')
      }
    }
  })],
  build: {
    lib: {
      entry: './src/entry.js',
      formats: ['es','cjs'],
      name: 'web-component',
      fileName: (format)=>(format === 'es' ? 'index.js' : 'index.cjs')
    },
    sourcemap: true,
    target: 'esnext',
    minify: false
  }
})

CodePudding user response：

I think the documentation is clear enough, I followed the use of vue with tailwind in the tailwind documentation and it worked fine,

https://tailwindcss.com/docs/guides/vite

make sure not to forget to import your tailwind.css in main.js

CodePudding user response：

Anyway, for now, what I have done is to add Tailwind directly to the web component and it works.

<style>
 @import url("../tailwind.css");
</style>