Tailwind 4 @reference '#tailwindcss' doesn't work when style is <style lang='postcss'>

[yuelongh]

Versions: "@nuxtjs/tailwindcss": "^7.0.0-beta.0", "nuxt": "^3.17.5"

nuxt.config.ts

{
  postcss: {
	plugins: {
		"@tailwindcss/postcss": {
			optimize: false // also I need to set optimize to false in order to work on production mode
		},
		"postcss-nested": {},
	}
 }
}

When the style is set to the following (postcss), then it throws errors or does nothing

<style lang='postcss' scoped>
@reference '#tailwindcss';

.ct-base__item{
  @apply flex;

  &--red{
    @apply text-red-500;
  }
}

</style>

The workaround I found is to set the following in package.json

  "imports": {
    "#importtailwindcss": "./app/assets/css/tailwind.css"
  }

Then in Vue file, I can use @reference '#importtailwindcss' to make it work again.

<style lang='postcss' scoped>
@reference '#importtailwindcss';

.ct-base__item{
  @apply flex;

  &--red{
    @apply text-red-500;
  }
}

</style>

Or not using PostCSS also works but I cannot use nested feature

<style lang='css' scoped>
@reference '#tailwindcss';

.ct-base__item{
  @apply flex;
}

.ct-base__item--red{
    @apply text-red-500;
 }
</style>

Anyone else having the same issue?

also to make postcss work on production see this thread