带有 Tailwind 风格的 Sveltekit 套件

Question

我正在尝试使用 svelte 打包库创建一个 Svelte 组件包（您可以使用

npm create svelte@latest

设置并选择 svelte 库。然后我按照 tailwind 的指南添加 tailwind https://tailwindcss.com/docs /guides/sveltekit.

问题是，当我运行

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，但是第一个 h1 上的

text-2xl

类却没有。

任何想法都值得赞赏。

Answer 1

我最近遇到了同样的问题。您需要告诉 TailwindCSS 在哪里寻找您的实用程序类。我已经使用 Flowbite-Svelte 的解决方案解决了这个问题。

假设您有两个包裹：

awesome-ui

和

awesome-app

。 您的

awesome-ui

软件包已发布在 npm 上并安装在

awesome-app

中。

在您的

awesome-app/tailwindcss.config.js

文件中，您需要确保

contents

还包含已安装的

awesome-ui

软件包的路径：

// ./awesome-app/tailwindcss.config.js

content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/awesome-ui/**/*.{html,js,svelte,ts}'
],

更多详情请参阅：

https://flowbite-svelte.com/docs/pages/quickstart#Configuration

https://github.com/shinokada/flowbite-svelte-starter/blob/main/tailwind.config.cjs

https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries

Answer 2

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