variants are broken in @apply in Svelte and Tailwind v4

[slingshotsys]

What version of Tailwind CSS are you using?

4.1.6

What build tool (or framework if it abstracts the build tool) are you using?

Svelte 4, Vite 5.4, @tailwindcss/vite 4.1.6

What operating system are you using?

For example: Windows

Describe your issue

I am using @apply inside a Svelte component, referencing my app.css file as per the docs.

<style>
	@reference "../../app.css";
	.works {
		@apply bg-red-400;
        }
</style>

This works just fine. However, as soon as you add a variant (or anything with a colon, probably), you get an error:

<style>
	@reference "../../app.css";
	.errors {
		@apply hover:bg-red-400;
        }
</style>

[plugin:vite-plugin-svelte] /app/src/routes/Error.svelte: Semicolon or block is expected

- Did you forget to add a lang attribute to your style tag?
- Did you forget to add a lang attribute to your style tag?
- Did you forget to add a lang attribute to your style tag?

 |    }
 |    .errors {
 |      @apply hover:bg-red-400;
                    ^
 |    }

This seems to be a postcss-related error, since the postcss plugin is part of @tailwindcss/vite now. Maybe Vite is throwing the error before tailwind has a chance to run?

[wongjn]

Try using @variant instead:

<style>
  @reference "../../app.css";
  .errors {
    @variant hover {
      @apply bg-red-400;
    }
  }
</style>

Seems to also work in the Svelte Playground, so could be specific to the version(s) of related packages you're using or something specific to your project.

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701