Nuxt•3mo ago

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

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>

// 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/**/*";

@import "tailwindcss";

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

My app.vue:

<script setup lang="ts">
</script>

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

<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>

<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',
  ],
})

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!

12 Replies

kapa.ai•3mo ago

Hi @MartinEnjoy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue—Tailwind CSS classes not applying in your global Vue component (OpinionSection.global.vue), while working in pages—can be related to how Tailwind scans for class usage and how Nuxt handles global components. Key points to check and solutions: 1. Tailwind Content Scanning You are already using the @source directive in your main.css to explicitly include your components, content, and pages directories:

@import "tailwindcss";

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

@import "tailwindcss";

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

This is the correct approach for Tailwind CSS v4 and Nuxt UI, ensuring Tailwind picks up classes used in those files, including global components and markdown content. Make sure the relative paths in @source are correct based on the location of your main.css file. If main.css is in app/assets/css/, then ../../components/**/* should resolve to your components directory. Double-check the path if you moved files or directories recently.
See: Nuxt UI Theme Customization 2. Global Components and Tailwind Nuxt auto-imports components in the components/ directory, and you can make a component global by using the .global.vue suffix or placing it in a global/ subdirectory. This makes the component available everywhere, but it does not affect Tailwind's ability to scan for classes as long as your @source directives are correct
See: Nuxt Components Directory. 3. Slot Usage In your OpinionSection.global.vue, you are passing classes to the <slot> element, but slots do not accept class attributes directly. The class should be applied to the parent element, not the slot. For example:

<h1 class="text-3xl underline">
  <slot name="heading-one" />
</h1>

<h1 class="text-3xl underline">
  <slot name="heading-one" />
</h1>

Do not write <slot class="...">, as this will not apply the class to the slotted content.
See: Stack Overflow - Encapsulating css class doesn't apply [nuxt3] 4. Rebuild and Cache After changing Tailwind config or @source directives, always restart your dev server to ensure Tailwind picks up new files and classes. --- Summary of what to check: - Ensure your @source paths in main.css are correct. - Do not use class on <slot> elements; apply classes to the parent or wrapper elements. - Restart your dev server after changes. If you follow these steps and Tailwind classes are still not applied in your global component, double-check the file paths and ensure there are no typos or misconfigurations in your directory structure or Nuxt config. If you need to see a working example of slot/class usage, refer to this Stack Overflow answer. Let me know if you need further clarification! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@475520454514180098> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Cake•3mo ago

what are you using @source for?

MartinEnjoyOP•3mo ago

It's for explicitly scanning for the .vue files in the path I set the @source at I think.

Cake•3mo ago

tried without?

MartinEnjoyOP•3mo ago

Although I guess tailwind already scans it automatically. Let me try removing LOL after removing the @source, the markdown I am trying to render just disappeared

Cake•3mo ago

:pepo_think:

MartinEnjoyOP•3mo ago

Weird one indeed

MartinEnjoyOP•3mo ago

Might help with the context cause I get this warning when rendering the Opinion page with the global component:

MartinEnjoyOP•3mo ago

I think ContentRenderer from @nuxt/content just doesn't render tailwind classes I put in the global vue component hmmm, hella weird.

Cake•3mo ago

well isn't the correct name for the component ContentOpinionSection? since it's in /components/content?

MartinEnjoyOP•3mo ago

Oh, wait.... I'll try that. Both have it as ContentOpinionSection.global.vue, and have the parsed named slot as

::content-opinion-section{slot-name}
Some text here
::

::content-opinion-section{slot-name}
Some text here
::

Gaming

Programming

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

Did you find this page helpful?