带有 Tailwind 风格的 Sveltekit 包

Question

我正在尝试使用 svelte 打包库（您可以设置并npm create svelte@latest选择 svelte 库）创建一个 Svelte 组件包。然后，我按照 tailwind 的指南https://tailwindcss.com/docs/guides/sveltekit添加 tailwind 。

问题是，当我运行npm run build创建包时，实用程序类没有转换为 css。有趣的是，我使用 @apply 语法添加到样式标记的任何样式都会这样做。

任何人都可以帮助解释发生了什么事吗？这是预处理问题吗？我是否从根本上误解了顺风的工作原理？

有关更多详细信息，这是我为说明这一点而制作的一个小型存储库：https ://github.com/awenzel5/sveltekit-package-tailwind

它在 src/lib 文件夹中有一个组件，很简单

<h1 class="text-2xl">Hello</h1>
<h1 class="small-text">World</h1>

<style lang="postcss">
    .small-text{
        @apply text-sm;
    }
</style>

运行 npm run build 后，这会构建为

<h1 class="text-2xl">Hello</h1>
<h1 class="small-text">World</h1>

<style>
    .small-text {
    font-size: 0.875rem;
    line-height: 1.25rem
}
</style>

正如您所看到的，@apply 类起作用并从 tailwind 获取了 css，但是text-2xl第一个 h1 上的类却没有。

任何想法表示赞赏。

Answer 1

你应该使用unocss。它有支持顺风，但要好得多。您仍然可以在其中使用顺风。我在 sveltekit 中使用它，我的网站在 google pagespeed 中得分为 100。在使用unocss之前，它的分数低很多。我可以说 unocss 和 sveltekit 是我所知道的最美妙的组合