我正在尝试使用 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 上的类却没有。
任何想法表示赞赏。