A little addon i can recommend for Tailwind is "Inline Fold". It collapses the class section in a document to 3 little dots and open it if u click in it. You can also bind a keybind to fold and unfold it.. makes everything waaay more readable!
You can make vanilla classes with tailwind too. Just use @apply in css. It's also keeps your html file clean. Example: .hero { @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 } I don't know why people doesn't use that feature and always says that Tailwind create mess in html file. 😐
Thanks for the great tutorial! Just FYI, the next release of Tailwinds Prettier plugin will no longer bundle the Svelte plugin. Checkout PR 90 in their repo.
Maybe someone runs into the same problem with the tailwind autoformatting - i needed to add "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], in the .prettierrc to make it work and had to leave prettier-plugin-svelte installed. Took me quite a while, enjoy...! :D
They changed how the plugin works recently - I'm going to update the post but you can read the instructions at github.com/tailwindlabs/prettier-plugin-tailwindcss.
update as of March 27th 2024: I was able to leave in the prettier-plugin-svelte and then had this in my prettierrc - "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
![[Watch Party] RoV Pro League 2024 Winter | ( Bacon Time Vs PSG )](http://i.ytimg.com/vi/zM25REvnJW4/mqdefault.jpg)
I forgot to mention it but there's even an easier way to set up Tailwind CSS in Svelte with `npx svelte-add tailwindcss`. 🔥
A little addon i can recommend for Tailwind is "Inline Fold". It collapses the class section in a document to 3 little dots and open it if u click in it. You can also bind a keybind to fold and unfold it.. makes everything waaay more readable!
That's awesome! 😄
You can make vanilla classes with tailwind too. Just use @apply in css. It's also keeps your html file clean.
Example:
.hero {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4
}
I don't know why people doesn't use that feature and always says that Tailwind create mess in html file. 😐
Thanks for the great tutorial! Just FYI, the next release of Tailwinds Prettier plugin will no longer bundle the Svelte plugin. Checkout PR 90 in their repo.
Thank you for the heads up!
Thank you.
Thanks for the tutorial!
If you watched this tutorial already, I would recommend using svelte-add for your next project to add tailwind with ease.
That's a hot tip! 🔥
Thank you! I wanted to use tailwind in my Svelte but the documentation was so confusing. Much appreciated
You're welcome! 😄
Maybe someone runs into the same problem with the tailwind autoformatting - i needed to add
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
in the .prettierrc to make it work and had to leave prettier-plugin-svelte installed. Took me quite a while, enjoy...! :D
nice!😃
🔥
Should I watch the Sveltekit for beginners tutorial and the migration one or wait for an updated video?
Wait for the update! 😄
So nice! Btw, what is this zsh(?) plugin that shows the node version?
I use github.com/zsh-users/zsh-autosuggestions
Hey the prettier autoformat doesn't work now. Do you know why?
I'm sorry I haven't updated the post yet but you can follow these instructions: github.com/tailwindlabs/prettier-plugin-tailwindcss.
Doesn't work for me :D
They changed how it works! I would read github.com/tailwindlabs/prettier-plugin-tailwindcss.
@@JoyofCodeDev forgot to post an edit, just doing «npm i -D prettier-plugin-tailwindcss» worked 😅
not working for me
They changed how the plugin works recently - I'm going to update the post but you can read the instructions at github.com/tailwindlabs/prettier-plugin-tailwindcss.
@@JoyofCodeDev did you update the post? :p
@@theIbraDev Not yet! 😄
update as of March 27th 2024: I was able to leave in the prettier-plugin-svelte and then had this in my prettierrc - "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]