tailwind css - How to get tw-in-js/twind plugins to work in Svelte

Question

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.

question from:https://stackoverflow.com/questions/65879072/how-to-get-tw-in-js-twind-plugins-to-work-in-svelte

Answer 1

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 that setup is called only once per app.