Svelte Tutorial for Beginners - Style your Svelte component [2/3] - class: Directive

We are going to learn how to conditionally style elements in Svelte component.

-- We can pass a JavaScript expression to the class attribute. If we pass a dynamic string variable, every time the string value changes, we can apply a different class to the element. So, what's more to learn?

Yes, and in this video, we are going to explore another trick, that is more readable and concise than manipulating strings in the class attribute.

Introduction 00:00
Various ways to conditionally add class to elements 00:12
The class: directive 02:35
Shorthand for class: directive 04:30

---

💻 REPL https://svelte.dev/repl/19cce00af5ba4...

🎧 Svelte Tutorial for Beginners    • Svelte Tutorial for Beginners  

📚 Related Resources
Svelte https://svelte.dev
Svelte REPL https://svelte.dev/repl
Svelte Tutorial - Classes https://svelte.dev/tutorial/classes

🥰 Support me https://www.buymeacoffee.com/lihautan

🔗 Want to learn more from me? Check out these links:

Twitter:   / lihautan  
Blog: https://lihautan.com/
Newsletter: https://lihautan.com/newsletter

#svelte #sveltetutorial #sveltebeginner

Thanks for watching 🥰 -- with love, Li Hau