Il y a deux manières de définir des classes sur les éléments : l'attribut `class`, et la directive
`class:`.

## Attributs [!VO]Attributes

Les valeurs primitives sont traitées comme n'importe quel autre attribut :

```svelte
<div class={large ? 'large' : 'small'}>...</div>
```

> [!NOTE]
> For des raisons historiques, les valeurs falsy (comme `false` ou `NaN`) sont stringifiées
> (`class="false"`), alors que `class={undefined}` (ou `null`) provoquent l'omission de l'attribut.
> Dans une version future de Svelte, toutes les valeurs falsy vont provoquer l'omission de `class`.

### Objets et tableaux [!VO]Objects and arrays

Depuis Svelte 5.16, `class` peut être un objet ou un tableau, et sera convertie en chaîne de
caractères en utilisant [clsx](https://github.com/lukeed/clsx).

Si la valeur est un objet, les clés truthy sont ajoutées :

```svelte
<script>
	let { cool } = $props();
</script>

<!-- results in `class="cool"` if `cool` is truthy,
     `class="lame"` otherwise -->
<!-- devient `classs="cool"` si `cool` est truthy,
		` class="lame"	 sinon -->
<div class={{ cool, lame: !cool }}>...</div>
```

Si la valeur est un tableau, les valeurs truthy sont combinées :

```svelte
<!-- si `faded` et `large` sont toutes les deux truthy,
		devient `class="saturate-0 opacity-50 scale-200"` -->
<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>
```

Notez que peu importe si vous utilisez la forme tableau ou la forme objet, vous pouvez définir
plusieurs classes en même temps avec une seule condition, ce qui est particulièrement utile si vous
utilisez des outils comme Tailwind.

Les tableaux peuvent contenir des tableaux et des objets, et clsx se chargera de les "aplatir". Ceci
est utile pour combiner les classes locales avec des props, par exemple :

```svelte
<!--- file: Button.svelte --->
<script>
	let props = $props();
</script>

<button {...props} class={['cool-button', props.class]}>
	{@render props.children?.()}
</button>
```

Le consommateur du composant ci-dessus peut utiliser tout aussi bien un mélange d'objets, de
tableaux et de chaînes de caractères :

```svelte
<!--- file: App.svelte --->
<script>
	import Button from './Button.svelte';
	let useTailwind = $state(false);
</script>

<Button
	onclick={() => useTailwind = true}
	class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
>
	Accepter que Tailwind est incontournable
</Button>
```

Svelte expose également le type `ClassValue`, qui est le type de valeur que l'attribut `class` des
éléments attend. Ceci est utile si vous renforcer le typage des noms de classe dans vos props de
composant :

```svelte
<script lang="ts">
	import type { ClassValue } from 'svelte/elements';

	const props: { class: ClassValue } = $props();
</script>

<div class={['original', props.class]}>...</div>
```

## La directive `class:` [!VO]The `class:` directive

Avant Svelte 5.16, la directive `class:` était la manière la plus efficace de définir des classes de
manière conditionnelle sur des éléments.

```svelte
<!-- ces écritures sont équivalentes -->
<div class={{ cool, lame: !cool }}>...</div>
<div class:cool={cool} class:lame={!cool}>...</div>
```

Comme pour les autres directives, il est possible d'utiliser une syntaxe raccourcie lorsque le nom
de la classe coïncide avec la valeur :

```svelte
<div class:cool class:lame={!cool}>...</div>
```

> [!NOTE] À moins que vous n'utilisiez une version ancienne de Svelte, il est recommandé d'éviter
> `class:`, puisque la syntaxe d'attribut est plus puissante et plus flexible.