Replies: 2 comments 10 replies
-
Hey @omaishar! Yeah unfortunately slashes inside class names are not supported by the class directive in Svelte right now. You can make it work around this limitation by adding classes like this, though: <div class="{ isDisabled ? 'bg-gray-500/50' : '' }"></div> I don't think there's going to be anything we can do to fix this from our end but there seems to be appetite like there's interest in allowing more characters in css class names if you take a look at this issue: sveltejs/svelte#7170 |
Beta Was this translation helpful? Give feedback.
10 replies
This comment was marked as spam.
This comment was marked as spam.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Tailwind v4 does not seem to parse any Svelte class directives.
Example:
Tailwind v3 - works!
<div class:bg-gray-500={isDisabled} ...>
After running
tailwindcss
CLI command thebg-gray-500
class is added to theapp.min.css
file.Tailwind v4 - does not work!
<div class:bg-gray-500={isDisabled} ...>
After running
npx @tailwindcss/cli
CLI command thebg-gray-500
class is NOT added to theapp.min.css
file.What version of Tailwind CSS are you using?
Tailwind: 4.0.0-beta.4
Tailwind CLI: 4.0.0-beta.4
What build tool (or framework if it abstracts the build tool) are you using?
SvelteKit: 2.5.26
Vite: 5.4.4
What version of Node.js are you using?
20.17.0
What browser are you using?
For example: Chrome, Safari, or N/A
What operating system are you using?
MacOS
Beta Was this translation helpful? Give feedback.
All reactions