我有一个Vue Web组件。当我将其作为普通的Vue组件构建时,一切都正常。然而,当我将其转换为Vue Web组件后,它立即失去了所有Tailwind样式。提前感谢您的帮助。
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;
在我的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
}
})