[v4] @apply not effected (SvelteKit, Vite)

[szig83]

What version of Tailwind CSS are you using?

4.0.0-alpha.9

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

Svelte 5.0.0-next.80, SvelteKit 2.5.4, @tailwindcss/vite 4.0.0-alpha.9, vite 5.2.2

What version of Node.js are you using?

For example: v20.10.0

What browser are you using?

Brave (Chrome), Firefox, Safari

What operating system are you using?

macOS

Reproduction URL

https://github.com/szig83/svelte5-tailwind4 (https://github.com/szig83/svelte5-tailwind4/blob/main/src/routes/%2Bpage.svelte)

Describe your issue The problematic code snippet can be found in the src/routes/+page.svelte file. I created a custom CSS class where I wanted to use the @apply directive. There is no error during build and runtime, but the @apply directive seems to not take effect. The div element with the Tailwind class (bg-gray-700) is applied correctly.

[coolemur]

@apply should be deprecated

[szig83]

And what would be the solution if I want to apply Tailwind classes within my own class definition?

[coolemur]

And what would be the solution if I want to apply Tailwind classes within my own class definition?

The main question is why you think you need @apply, not why you don't have it.

Take a look a this: https://twitter.com/adamwathan/status/1226511611592085504?lang=en

[coolemur]

And if you really need it, why not just apply plain CSS class with custom styles? This must be exceptional use case, not a pattern in your code anyway.

[szig83]

I see. It's logical after all :) Thanks for the info.

[QuentiumYT]

I think it should still be included for CMS that uses content from a WYSIWYG for example. I do have some default styles using Tailwind for some blocs :)