I'm using tw-in-js/twind in Svelte. when using the vanilla setup for Svelte App and after including Twind I cannot find any way to get plugins to work:
<script>
import {tw, apply, setup} from 'twind/css';
setup ({
plugins: {
h1style: apply`
uppercase
text-6xl
font-thin
`,
},
});
const h1style2 = apply `uppercase text-6xl font-thin`;
export let name;
</script>
<main>
<h1 class={tw`h1style`}>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial" class={tw`italic`}>Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
In the code sample above h1style2 (the const declaration) works but the Plugin h1style does not.
I would appreciate knowing if anyone can get this to work.
I tried your example in the Svelte Repl and it seems to work: https://svelte.dev/repl/e153da51e31a4b6c90cce63d9b6b3194?version=3.31.2
Here you find our example svelte project: https://github.com/tw-in-js/example-svelte
One thing to note is that
setup
should be outside of a component in the app initializer or within the<script context="module">
. This ensures thatsetup
is called only once per app.