[tailwindcss v4] Unable to @apply primevue vars in vue scoped css

[asamofal]

There's something changed in Tailwindcss v4. Now to use @apply in the vue component style block, it's required to have a reference to the tailwindcss theme.

<style scoped>
@reference 'tailwindcss';

.p-button {
  @apply p-2 text-surface-700;
}
</style>

[plugin:@tailwindcss/vite:generate:serve] Cannot apply unknown utility class: text-surface-700

[kaspernowak]

@asamofal Is this package even compatible with Tailwind v4 yet?

[asamofal]

@kaspernowak Well... I would say not really, not yet. I created this issue to just highlight the problem for someone who will add the support for v4 🙂

[dxvgef]

I attempted to upgrade Tailwind CSS from version 3 to version 4, but the text-primary became unavailable. As a result, I had to revert Tailwind CSS back to version 3 and await updates to the library.

[connorabbas]

I attempted to upgrade Tailwind CSS from version 3 to version 4, but the text-primary became unavailable. As a result, I had to revert Tailwind CSS back to version 3 and await updates to the library.

primefaces/primevue#7133 (comment)