小编Elv*_*vis的帖子

Tailwind css 在 Vue Web 组件中不起作用

我有一个 Vue Web 组件。当我将其构建为普通的 Vue 组件时,一切正常。然而,当我将其转换为 Vue Web 组件时,它就失去了所有 Tailwind 样式。提前感谢您的帮助。

tailwind.config.js

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

Run Code Online (Sandbox Code Playgroud)

顺风.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Run Code Online (Sandbox Code Playgroud)

和我的 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('-')
      }
    }
  })], …
Run Code Online (Sandbox Code Playgroud)

web-component vue.js tailwind-css

6
推荐指数
1
解决办法
1万
查看次数

标签 统计

tailwind-css ×1

vue.js ×1

web-component ×1