Vue 3.0 component not applying classes from tailwind

Question

The problem that I'm having is that want to use Tailwindcss to style my Vue components but it is not applying them. It is working for my views and App.vue, but somehow not for the components. I followed every step on the Vue Vite website and the Tailwindcss page for adding it to Vue.

This is what I have now:

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>

Sorry if this question has been asked earlier, but after googling I found nothing. I've tried to add the components manually to tailwind.config.js. Also I tried importing Tailwindcss directly into the component. That didn't do the trick and also don't think that is the best way. I'm new to front-end frameworks and trying to learn for my study, but I'm stuck.

Public github: https://github.com/Develex/vue-test-1

Sorry if my English is not great, it is not my native language.

Answer 1

<article> is a native HTML element, thus when HomeView.vue is rendered, it renders this native HTML element, not your Article.vue that you might expect:

Thus, no styling from your Article.vue component is observed.

To use your Article component, you'd need to match the casing of the component variable from the import, like:

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

This will now actually render the Article component:

See this working in this Stackblitz