NuxtN
Nuxt•4mo ago•
18 replies
MartinEnjoy

Tailwindcss in Nuxt 4: Classes not working in global vue component

Current file structure:

/app
|_ assets
 |_ css
  |_ main.css
|_ components
 |_ content
  |_ OpinionSection.global.vue
|_ pages
  |_ opinion.vue
|_ app.vue

/content
|_ index.md


I am encountering a problem with rendering tailwindcss in my global vue component, but tailwind works fine in the pages dir.

I am parsing markdown using @nuxt/content through a global component called OpinionSection.global.vue

I have this code currently:
// OpinionSection.global.vue
<script setup lang="ts">
</script>

<template>
  <section>
    <div class="flex flex-col items-start">
      <h1 class="text-3xl underline">
        <slot class="text-3xl underline" name="heading-one" />
      </h1>
      <slot name="paragraph" />
      <slot name="paragraph-two" />
    </div>
  </section>
</template>


My main.css:
@import "tailwindcss";

@source "../../components/**/*";
@source "../../content/**/*";
@source "../../pages/**/*";


My app.vue:
<script setup lang="ts">
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>


My opinion.vue page:
<script setup lang="ts">
const { data: index } = await useAsyncData(() => queryCollection('content').path('/').first())
</script>

<template>
    <ContentRenderer :value="index" />
</template>


Here's also my nuxt.config.ts:
import tailwindcss from "@tailwindcss/vite";

// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
        tailwindcss(),
    ],
  },
  modules: [
    '@nuxt/content',
  ],
})


Thanks in advance for the help!
Was this page helpful?