Using @reference combined with @apply syntax within a style tag with lang="scss" is invalid

[xxwangkaimin]

What version of Tailwind CSS are you using?

v4.3.0

What build tool (or framework if it abstracts the build tool) are you using?

Vite 8.0.12

What version of Node.js are you using?

v22.18.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-oebqbbpw?file=src%2FApp.vue

Describe your issue

Using @reference combined with @apply syntax within a style tag with lang="scss" is invalid

[wongjn]

As per the documentation:

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

Also, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701

Thus, consider using Tailwind class names directly:

--- a/src/App.vue
+++ b/src/App.vue
@@ -4,13 +4,5 @@ defineOptions({
 });
 </script>
 <template>
-  <div class="app">App</div>
+  <div class="text-blue-900">App</div>
 </template>
-
-<style lang="scss">
-@reference "./style.css";
-
-.app {
-  @apply text-blue-900;
-}
-</style>

[xxwangkaimin]

However, the class names of my classes are sometimes generated based on globally configured variables. If used within regular style tags, syntax like the following cannot be employed:

.#{$namespace}-menu {
}

We'll just have to see if there are any other methods.

[RobinMalfait]

Is scss really needed in this case? If you're just dealing with (nested) CSS (and Tailwind CSS) features then you can drop the lang="scss" which should fix it as well.