Tailwind CSS在Vue Web组件中无法正常工作。

Question

我有一个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
  }
})

- Elvis

Answer 1

将您的 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: [],
}

- Dhamith Kumara

---

谢谢，将Vue扩展名添加到文件扩展名列表中解决了我的问题。干杯！ - Sanjeet Chand

Answer 2

无论如何，目前为止，我所做的是直接将Tailwind添加到Web组件中并使其正常工作。

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

- Elvis

---

这似乎不是一个好的方式，但这也解决了我的问题。 - Mohammad Chavoshi

Answer 3

在 src/main.js 中把 import "./assets/main.css"; 改成你的 tailwind css 文件。

- anony_Lenny