Vue 3.0 组件未应用 tailwind 中的类

Question

我遇到的问题是想要使用 Tailwindcss 来设计我的 Vue 组件，但它没有应用它们。它适用于我的观点和

App.vue

，但不知何故不适用于组件。我按照 Vue Vite 网站和 Tailwindcss 页面上的每个步骤将其添加到 Vue。

这就是我现在拥有的：

tailwind.config.js

：

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './public/**/*.html',
        './src/**/*.{js,jsx,ts,tsx,vue}',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js

：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

main.js

：

import './index.css'

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

index.css

：

@tailwind base;
@tailwind components;
@tailwind utilities;

Article.vue

：

<script setup>

defineProps(['title'])
</script>

<template>
  <div class="flex max-w-full flex-auto bg-teal-100 rounded-md p-8">{{ title }}</div>
</template>

<style scoped>

</style>

App.vue

：

<script setup>
import {RouterLink, RouterView} from 'vue-router'
</script>

<template>
  <header>
    <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
      <div class="flex items-center flex-shrink-0 text-white mr-6">
        <span class="font-semibold text-xl tracking-tight">Test Page</span>
      </div>
      <div class="block lg:hidden">
        <button
            class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
          </svg>
        </button>
      </div>
      <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
        <div class="text-sm lg:flex-grow">
          <RouterLink class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/">Home
          </RouterLink>
          <RouterLink class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/about">About
          </RouterLink>
        </div>
      </div>
    </nav>
  </header>

  <RouterView/>
</template>

<style scoped>
</style>

HomeView.vue

：

<script setup xmlns="http://www.w3.org/1999/html">
import Article from "@/components/Article.vue";
</script>

<template>
  <main>
    <article>lol</article>
    <div class="bg-amber-500 w-max p-8 rounded-md">hi</div>
  </main>
</template>

很抱歉，如果之前有人问过这个问题，但谷歌搜索后我什么也没找到。我尝试将组件手动添加到

tailwind.config.js

。我还尝试将 Tailwindcss 直接导入到组件中。这并没有达到目的，而且也不认为这是最好的方法。我是前端框架的新手，正在尝试学习以供学习，但我陷入了困境。

公共github：https://github.com/Develex/vue-test-1

抱歉，如果我的英语不是很好，那不是我的母语。

Answer 1

<article>

是原生 HTML 元素，因此当渲染

HomeView.vue

时，它会呈现此原生 HTML 元素，而不是您可能期望的

Article.vue

：

因此，不会观察到

Article.vue

组件的样式。

要使用

Article

组件，您需要匹配

import

中组件变量的大小写，例如：

<template>
  <main>
    <Article title="lol"></Article>
    <div class="bg-amber-500 w-max p-8 rounded-md">hi</div>
  </main>
</template>

现在将实际上渲染

Article

组件：

在 this Stackblitz

中查看此工作