小编And*_*zel的帖子

带有 Tailwind 风格的 Sveltekit 包

我正在尝试使用 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>
Run Code Online (Sandbox Code Playgroud)

运行 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>
Run Code Online (Sandbox Code Playgroud)

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

任何想法表示赞赏。

tailwind-css vite sveltekit

8
推荐指数
1
解决办法
781
查看次数

标签 统计

sveltekit ×1

tailwind-css ×1

vite ×1