问题：
我想在我的一个Svelte组件中使用TailwindCSS的插件(daisyUI)。看起来样式信息从该组件泄漏并影响整个网站。我该如何避免这种情况？
我不认为这与daisyUI有特别的关系。下面我将描述一个基于sveltekit的最小可复制示例。但这个问题与苗条无关。我在开发一个不使用sveltekit的网络扩展时遇到了这种情况。sveltekit设置只是为了对这个问题进行尽可能小的演示。
为了说明这个问题，我建立了一个sveltekit骨架项目，然后添加了一个使用Tailwind的额外svelte组件。当我添加插件时，我的页面背景颜色从白色变为灰色。我不明白这是怎么发生的，就我所见，我只是在那个组件中使用Tailwind。但风格似乎有所泄漏。
github上的最小示例：
最快的复制方式：
git clone git@github.com:lhk/minimum_example.git
cd minimum_example
npm install
npm run dev -- -- open
现在您可以编辑tailwind.config.cjs并添加/删除插件：
plugins: [
//require("daisyui")
],
逐步解释
我想将Svelte与Tailwind和DaisyUI一起使用。
这是一个最小的项目设置
# choose the skeleton project, typescript syntax and no to everything else
npm create svelte@latest minimum_example
cd minimum_example
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
npm i --save-dev daisyui
现在编辑tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'], theme: {
extend: {},
},
plugins: [
//require("daisyui")
],
}
在src/components/Problem.svelte:下添加新的Svelte组件
<p class="bg-blue-700">Using Tailwind class</p>
<style lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
并将其包含在src/routes/+page.svelte:中
<script lang="ts">
import Problem from "./../components/Problem.svelte";
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<Problem></Problem>
您可以使用运行项目
npm run dev -- -- open
如果你打开网站，你会看到sveltekit骨架应用程序，还有一段蓝色背景的文字(这是我对Tailwind工作的测试)。现在您可以在tailwind.config.cjs中取消对插件的注释。页面的背景将变为灰色。我认为这是一个不知何故从Tailwind插件泄露到整个网站的主题。
将顺风与苗条结合使用的方式是完全错误的。tldr的答案是删除@tailwind指令并改用@apply。
<p class="my-element">Using Tailwind class</p>
<style lang="postcss">
.my-element {
@apply bg-blue-700;
}
</style>
通过在自定义选择器旁边使用一个唯一的类名，例如.my-element变成.my-element.svelte-x57u2q，来实现svelte scopes样式的方式。这也意味着你必须使用一个选择器，这样这个作用域机制才能发挥作用
但随着香草顺风，这些内置类名必须是全局的才能有用，换句话说就是"泄漏"。这是设计出来的，不是bug。
因此，如果您想使用顺风，但又想利用svelte的scoped风格，@apply是唯一的解决方案。
官方文档有一个标题为"使用@应用程序和每个组件的CSS"的部分，它揭示了更多的技术细节，我认为值得一读。