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

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

@import "tailwindcss";

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

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

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

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

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

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