Almost all tailwind classes are ignored

[prof-schnitzel]

Environment

• Operating System: Windows_NT
• Node Version: v20.10.0
• Nuxt Version: 3.16.2
• CLI Version: 3.24.1
• Nitro Version: 2.11.9
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.2

Reproduction

https://github.com/prof-schnitzel/nuxt-ui3-module

Description

I have this little vue component:

<script setup>
</script>

<template>
  <div class="w-full h-[var(--my-height)] z-10 md:h-[96px]" />
  <div class="hidden md:block">Test</div>
</template>

My expectation would be that all styles belonging to those tailwind classes are applied, but instead I can only see the styles of the classes w-full and hidden. The other classes are ignored. I can't see why. Is this a nuxt ui bug? All of this was still working with the latest alpha version.

Additional context

No response

Logs

[selfire1]

We had the same issue when using Nuxt layers in our application. I was able to solve it by explicitly specifying the directories that tailwind should scan:

main.css

@source "../../../layers/Wireframe/**";

It may or may not be related to you issue. But you could try adding the @source directive in index.css, and point it towards your component folder.

[benjamincanac]

You can also use the source next to the tailwindcss import, here's an example: https://github.com/nuxt/ui/blob/v3/playground/app/assets/css/main.css#L1