I hope this question is not too broad.

Moving away from SASS while upgrading to Tailwind 4, I removed the lang=scss attributes from my <style scoped> tags in .vue files.

When removing the scss compiler reference, selectors only referenced in JS are not recognised as "used" anymore. This is already the case before switching to Tailwind 4.

Does anyone out there know if this might rather have to do with PhpStorm/WebStorm settings, Vite configuration, Vue or something else?

I have checked PhpStorm Setting

• Languages & Frameworks > Style Sheets
• Editor > Inspections > CSS > Unused selectors (I don't want to switch it off)

Minimal code example

<script setup lang="ts">
const {
  size = 'sm',
} = defineProps<{
  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl',
}>()
</script>

<template>
  <span :class="[size]" class="icon" />
</template>

<style scoped>
.sm { /* <-- marked as unused (greyed out) after removing scss compiler reference */
  height: 16px;
  width: 16px;

  &.icon { /* <-- still marked as used, presumably because it is directly referenced in HTML */
    font-size: 10px;
  }
}
</style>