css_unused_selector using @apply inside <style> (Tailwind v4)

[hyunbinseo]

Describe the problem

In the beta docs, you are guided to import the theme file only:

<template>
  <h1>Hello world!</h1>
</template>

<style>
  @import "../../my-theme.css" theme(reference);

  h1 {
    @apply font-bold text-2xl text-red-500;
  }
</style>

However in a recent GitHub comment, Adam suggests importing the global app.css file instead:

• [v4] @apply inside Svelte / Vue `<style>` not working as expected tailwindlabs/tailwindcss#15205

If you do use <style> blocks, make sure to import your global styles as reference if you want features like @apply to work as expected:

<template>
  <button><slot /></button>
</template>

<style scoped>
  @import "../app.css" reference;

  button {
    @apply bg-blue-500;
  }
</style>

This causes multiple 'Unused CSS selector' errors:

Unused CSS selector "html"
Unused CSS selector "body"
Unused CSS selector "hr"
Unused CSS selector "abbr:where([title])"
Unused CSS selector "h1"
Unused CSS selector "h2"
Unused CSS selector "h3"
Unused CSS selector "h4"
Unused CSS selector "h5"
Unused CSS selector "h6"
Unused CSS selector "b"
Unused CSS selector "strong"
Unused CSS selector "code"
Unused CSS selector "kbd"
Unused CSS selector "samp"
Unused CSS selector "pre"
Unused CSS selector "small"
Unused CSS selector "sub"
Unused CSS selector "sup"
Unused CSS selector "sub"
Unused CSS selector "sup"
Unused CSS selector "table"
Unused CSS selector "progress"
Unused CSS selector "summary"
Unused CSS selector "ol"
Unused CSS selector "ul"
Unused CSS selector "menu"
Unused CSS selector "img"
Unused CSS selector "svg"
Unused CSS selector "video"
Unused CSS selector "canvas"
Unused CSS selector "audio"
Unused CSS selector "iframe"
Unused CSS selector "embed"
Unused CSS selector "object"
Unused CSS selector "img"
Unused CSS selector "video"
Unused CSS selector "button"
Unused CSS selector "input"
Unused CSS selector "select"
Unused CSS selector "optgroup"
Unused CSS selector "textarea"

Describe the proposed solution

Disable 'Unused CSS selector' warnings on @import reference statements:

@import 'app.css' reference;
@import 'app.css' theme(reference);

This is all I can think of as of now.

Importance

would make my life easier