-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[v4] @apply not effected (SvelteKit, Vite) #13305
Comments
@apply should be deprecated |
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 |
And if you really need it, why not just apply plain CSS class with custom styles? |
I see. It's logical after all :) Thanks for the info. |
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 :) |
I like |
Just because there are lots of bad use cases for If anything, given v4 ships CSS-first configuration and built-in nesting support, I think the use case for For example, roll your own @layer components {
.prose {
@apply text-neutral-700 *:first:mt-0 *:last:mb-0;
caption {
@apply caption-bottom mt-4 text-left text-xs;
}
del {
@apply opacity-70;
}
iframe {
@apply border-0;
}
p {
@apply my-4;
}
/* etc. etc. etc. */
}
} This approach stays true to Tailwind, but is much more readable than the alternative. I'd love to see this supported. |
Yes and no. By enabling @apply you open door to abusing it And this prose case is just exception that could be handled using pure CSS instead of applying styles. |
To those who disagree - wait till you work on big scale project with larger team who will abuse @apply rule... Then you will understand my concern. 🤙 |
I don't think software should make itself non-abusable. If |
I agree, a lot of developers write the code how they want. We should have the ability to choose what to write and how we use the features. Indeed, there is some good and bad ways but sometimes we have to use some "deprecated" features rather than the forced way to do it. |
I don't agree, seeing abused code on a daily basis where it could be solved worldwide with a single opinionated solution 🙃 It's like seatbelts or DUI - if ppl had freedom, they would make big mistakes. And I am telling you right-now: freedom + saying "don't use it" will not work. 😆 |
In any case, please don't take nesting support away :D |
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.
The text was updated successfully, but these errors were encountered: