Svelte 5: Tailwind CSS `space-x-*` `space-y-*` no longer works in the style tag

[hyunbinseo]

Describe the bug

NOTE: This is a documentation purpose issue.

---

You can NO LONGER use @apply space-y-2 in the <style> tag.

<script>
  import './tailwind.css';
</script>

<ul>
  <li>Hello</li>
  <li>World</li>
</ul>

<!-- Unused CSS selector "ul > :not([hidden]) ~ :not([hidden])"svelte(css_unused_selector) -->
<style>
  ul {
    @apply space-y-2;
  }
</style>

• breaking: scope :not(...) selectors #13568

Due to the :not() handler being scoped, it has to be written like this.

- :not(.unknown)
+ :not(:global(.unknown))

Since Tailwind CSS .space-y-2 is basically this, it is now considered unused.

/* :glboal() selector is not used inside :not() */
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem /* 8px */ * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem /* 8px */ * var(--tw-space-y-reverse));
}

Workaround is to just write the space-y-2 class-name in the Svelte markup:

<script>
  import './tailwind.css';
</script>

<ul class="space-y-2">
  <li>Hello</li>
  <li>World</li>
</ul>

Reproduction

See above

Logs

No response

System Info

System:
  OS: macOS 15.0.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 28.73 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 22.10.0 - ~/.local/state/fnm_multishells/18273_1729417948566/bin/node
  npm: 10.9.0 - ~/.local/state/fnm_multishells/18273_1729417948566/bin/npm
  pnpm: 9.12.2 - ~/.local/state/fnm_multishells/18273_1729417948566/bin/pnpm
Browsers:
  Chrome: 129.0.6668.101
  Edge: 130.0.2849.46
  Safari: 18.0.1
npmPackages:
  svelte: ^5.0.2 => 5.0.2

Severity

annoyance