[Question] Theme function for @media inside Vue style scoped

[christhofer]

According to upgrade guide, this is how you reference breakpoint size for @media

-@media (width >= theme(screens.xl)) {
+@media (width >= theme(--breakpoint-xl)) {
  /* ... */
}

This is working fine in playground, and inside .css file.

But this doesn't work with vite + vue <style scoped>, I got error

'--breakpoint-sm' does not exist in your theme.

I can only make it work inside <style scoped> with the old dot notation

@media (width >= theme('screens.sm')) {
}

Is this intentional? I can't find it documented anywhere. My concern is the dot notation will be deprecated and removed in the future.

NB: I can't provide a repro in stackblitz because it doesn't support tailwindcss/vite

[wongjn]

You probably need to use the @reference directive.

[christhofer]

I have it, otherwise the @apply won't work

[wongjn]

Use @variant instead like:

@variant xl {
  .card {
    …
  }
  …
}

---

As an aside, 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

[christhofer]

Use @variant instead

That works as an alternative. Confirmed to work inside <style scoped>

However, my point about Vue style scope with theme(--breakpoint-xl)still stands, is it a bug or intentional...

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply

Yeah I read that too when v4 released.
But using @apply like this is so much faster, I'll definitely migrate to UnoCSS if Tailwind removes @apply.

+ @utility card {
+     @apply px-8 rounded bg-white;
+ }
- .card {
-     padding-inline: 2rem; /* even longer with calc(var(--spacing) * 2) */
-     border-radius: 4px;
-     background: white;
- }

[wongjn]

The Tailwind paradigm is to have the class names in the template and not write any CSS at all:

-<div class="card">
+<Card>

<!-- card.vue -->
<div class="px-8 rounded bg-white">