[V4] Declaring @utility in vue SFC

[Doltario]

Hi everyone,

I roamed in this forum and in the issues section but I couldn't find exactly what I was looking for. Please let me know if you think the answer is somewhere else !

Context

I am trying to migrate a component library from TW3 to TW4 with:

   "@tailwindcss/vite": "^4.1.6",
    "tailwindcss": "^4.1.6",
    "vue": "^3.5.13"
    "vite": "^6.3.5",

Since I'm implementing a design system, I have components with color variations (alert--red, alert--green, …).

So far, with TW3, the previous devs were using SCSS to generate right classes:

 @each $color in $colors {
    .alert--#{$color} {
      @apply tw-bg-#{$color}-lighten6 tw-border-#{$color}-lighten5 tw-text-#{$color} tw-border-l-#{$color};
    }

And it worked just fine.

But from what I read, using pre-processors is not really tailwind-ish. So I read on how to replace SCSS.
I read here that inline style is the recommanded way but I was more attracted by using @components layer but the wildcard (as @utility) seems to not be designed that way :

@component mylib-alert--* {
  @apply tw:bg-[--value(--color-*)];
}

So I considered using the layer utilities accepting that my components classes would be at the same level as TW utilities. Something so:

/* style.css */
@import 'tailwindcss' prefix(tw);

@theme {
  --color-*: initial; /* Resets Tailwind default color (https://tailwindcss.com/docs/theme#overriding-the-default-theme) */
  --color-green: #00FF00;
}

@utility mylib-alert--* {
  @apply tw:bg-[--value(--color-*)];
}

--> This is "dynamic" enough to me and it actually works fine when the utility is defined in the global style.css. Nevertheless as soon as I move it to the style block of the SFC "Alert.vue" it seems it is not compiled anymore.

Reproduction

Here I tried:

• inside a SFC "scoped" style block
• inside a SFC regular style block (no "scoped" tag)

Questions

1/ Is it not really "tailwind-ish" to attempt to do so ? I liked the idea that my components implements their own color variation class though…
2/ What do you think about using SCSS to cover that case ?

Thanks for reading :)

[wongjn]

The Tailwind way would be to have your Alert component handle the coloring. I don't code in Vue very often nowadays so please excuse the pseudo-code:

<script setup>
const props = defineProps(['color'])

const COLORS = {
  red: 'tw:bg-red-lighten6 tw:border-red-lighten5 tw:text-redtw:border-l-red',
  green: 'tw:bg-green-lighten6 tw:border-green-lighten5 tw:text-green tw:border-l-green',
  …
}
</script>

<div :class="`${COLORS[props.color]} …`"><!-- This would have been the old .alert--<color> element. -->

[Doltario]

Hi @wongjn,

thanks for your answer, I read that this is way of doing as well. So I understand it is indeed the "Tailwinder" way of achieving it.

The thing is, since I am working on a design system, I may have a lot (like around 200) of colors and variants (lightens and darkens), so the dynamic styling was very appealing for maintenance (colors addition/suppression/edition). That is why the utilities' wildcard was really interesting.

So even though I think Tailwind is great and V4 is better than what I could read on some issues, maybe it is best tool to implement a design system. I'll explore considering adding SCSS to it of sticking to SCSS only.