如何让 tw-in-js/twind 个插件在 Svelte 中工作

Question

我在 Svelte 中使用 tw-in-js/twind。当使用 Svelte 应用程序的香草设置时，在包含 Twind 之后，我找不到任何方法让插件工作：

<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>

在上面的代码示例中，h1style2（const 声明）有效，但插件 h1style 无效。

如果有人能让它工作，我将不胜感激。

Answer 1

我在 Svelte Repl 中尝试了您的示例，它似乎有效：https://svelte.dev/repl/e153da51e31a4b6c90cce63d9b6b3194?version=3.31.2

在这里您可以找到我们的示例 svelte 项目：https://github.com/tw-in-js/example-svelte

需要注意的一件事是 setup 应该在 app initializer 中的组件之外或 <script context="module"> 中。这确保每个应用程序只调用一次 setup。

如何让 tw-in-js/twind 个插件在 Svelte 中工作

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

svelte

tailwind-css

twind

tailwind-in-js