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

【问题标题】：Tailwind css not working in Vue web componentTailwind css 在 Vue Web 组件中不起作用
【发布时间】：2022-11-08 01:48:03
【问题描述】：

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

tailwind.config.js

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

顺风.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
  }
})

【问题讨论】：

标签： vue.js tailwind-css web-component

【解决方案1】：

我认为文档已经足够清晰了，我在tailwind文档中使用了带有tailwind的vue并且效果很好，

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

确保不要忘记在 main.js 中导入您的 tailwind.css

【讨论】：

您是否尝试过将 Tailwind 与 Web 组件一起使用？因为我想你会发现它不起作用。当我将它构建为普通的 Vue 组件时，它可以工作，但在转换为 Web 组件时就不行。如果它适用于您的 Web 组件，请分享您的配置，因为我已反复遵循文档。

【解决方案2】：

无论如何，就目前而言，我所做的是将 Tailwind 直接添加到 Web 组件中并且它可以工作。

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

【讨论】：

【解决方案3】：

只需停止当前进程并使用npm run dev 重新启动构建进程

【讨论】：