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

[dummdidumm]

If you import your app.css, and that file contains any kind of CSS selector definitions, then they will all be loaded into the style tag, and since most of them won't apply you get a lot of unused CSS selector warnings.

There's nothing that Svelte can do about this because it does not know how the file looked prior to preprocessing, so it would be the preprocessor's job to only put in the relevant things.

If the advice that is currently on the beta docs works then I would use that instead.

With regards to your "now I gotta do that import everywhere": You could use prependData from svelte-preprocess to avoid that.

I'm not sure what else we can do / advice here, so I'm moving this to a discussion