Svelte by Example: Class & Style Directives

Svelte supports class: and style: directives to make dynamic styling easy.

In this example, we'll style completed todos with a line through the task.

Classes can be conditionally rendered with a class:<class>= notation.

Todo.svelte

<script>
  let { task, completed = false } = $props();
</script>



<p class:is-completed={completed}>
  {task}
</p>

<style>
  .is-completed {
    text-decoration: line-through;
  }
</style>

Styles can also be set with a style:<property>= notation. A null value removes the inline style.

Todo.svelte

<script>
  let { task, completed = false } = $props();
</script>



<p style:text-decoration={completed ? 'line-through' : null}>
  {task}
</p>

resources://