我有一个 Vue 网络组件。当我将它构建为普通 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
}
})
无论如何,就目前而言,我所做的是将 Tailwind 直接添加到 Web 组件并且它可以工作。
<style>
@import url("../tailwind.css");
</style>
在 src/main.js 中将
import "./assets/main.css";
更改为您的 tailwind css 文件
`
像下面这样改变你的 tailwind.config.cjs
更改前 tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
更改 tailwind.config.cjs 后
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
theme: {
extend: {},
},
plugins: [],
}