directives and Framgents | Astro Lounge | Page 1

Hi @limpid breach. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Yes, the class:list directive can be used in Astro, including with <Fragment/>. The class:list directive takes an array of class values and converts them into a class string. This is inspired by the popular clsx helper library, but built directly into Astro itself. Here's an example of how it works:

<!-- This -->
<span class:list={[ 'hello goodbye', { hello: true, world: true }, new Set([ 'hello', 'friend' ]) ]} />
<!-- Becomes -->
<span class="hello goodbye world friend"></span>

However, please note that there is a known bug where class and class:list are passed as regular props instead of the magical class merging feature similar to clsx when passing to an Astro component. This issue has been reported on GitHub (https://github.com/withastro/astro/issues/7747).

#directives and Framgents

For more information, you can refer to the Astro documentation on directives (https://docs.astro.build/en/reference/directives-reference#classlist).

`Note: you can ask me a follow up question by @ mentioning me again` :speech_balloon:

#directives and Framgents

For more information, you can refer to the Astro documentation on directives (https://docs.astro.build/en/reference/directives-reference#classlist).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

`Note: you can ask me a follow up question by @ mentioning me again` :speech_balloon: