如何从Svelte组件中使用@layer指令的tailwind @apply？

Question

我想使用apply在组件上定义一些CSS样式，同时我还想能够进行覆盖，像这样：

<!-- CustomButton.svelte -->
<script>
    let className = '';
    export { className as class };
    export let label = 'Click me!';
</script>

<button class="custom-button {className}">{label}</button>

<style lang="postcss">
.custom-button {
    @apply bg-blue-400 font-bold text-white rounded-lg p-4;
}
</style>

我希望你能翻译一下以下内容：

And I want to use it like this:

<script>
    import CustomButton from './CustomButton.svelte';
</script>

<div class="w-screen h-screen flex justify-center items-center">
    <CustomButton class="bg-red-800" label="This is my button" />
</div>

也就是说，我想要能够覆盖@applied设置。

问题在于，@apply指令的设置不能被这行代码覆盖。

<button class="custom-button {className}">{label}</button>

我了解到，为了做到这一点，我必须告诉Tailwind在组件层生成相应的CSS，也就是在实用程序之前。

如果我在app.post.css文件中，在@tailwind utilities行之前或使用@layer components指令中输入相同的CSS指令，则可以正常工作：

/* app.post.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* This works ok! */
@layer components {
  .custom-button {
    @apply bg-blue-400 font-bold text-white rounded-lg p-4;
  }
}

所以，我希望有一种方法可以告诉Tailwind将我在CustomButton.svelte组件中定义的.custom-button样式添加到组件层级，这样它就可以被内联类覆盖。

如果我尝试在CustomButton.svelte文件中这样做

<style lang="postcss">
    @layer components {
        .custom-button {
            @apply bg-blue-400 font-bold text-white rounded-lg p-4;
        }
    }
</style>

我遇到了以下错误：

9:13:34 PM [vite] Internal server error: /home/sas/devel/apps/glas-it/apps/wingback/end-user-portal/src/routes/CustomButton.svelte?svelte&type=style&lang.css:1:1: `@layer components` is used but no matching `@tailwind components` directive is present.
  Plugin: vite:css

这个问题阻止我在任何组件中使用@apply指令。

有没有办法解决这个问题？

- opensas

Answer 1

我能够通过在配置文件中导入@tailwind指令和函数，将其应用于SvelteKit：

// svelte.config.js

+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';

 const config = {
...
+  preprocess: sequence([
+    sveltePreprocess({
+      postcss: {
+        plugins: [tailwindcss, autoprefixer]
+      }
+    }),
+  ]),
...
}

注：我已经将其设置在我的postcss.config.cjs文件中，但它没有起作用。

然而，在<style>组件标签内使用@tailwind components指令：

• 使用抛出警告（“未知规则 @tailwind”）
• 使用抛出警告（“未使用的CSS选择器”）

因此，最简单的方法似乎是将tailwind组件保留在全局app.css文件中，直到有更好的支持。

- Letik

---

预处理器到底在哪里，它是配置对象中的一个关键字，还是插件数组的一部分？ - SamTheProgrammer

@Password-Classified 是配置对象中的一个关键字，请参见 https://github.com/sveltejs/svelte-preprocess#what-is-it。 - Letik

返回翻译的文本：+1和谢谢。只是想说我必须对它进行微调才能使其工作... ... 预处理：[预处理（{postcss：true，plugins：[tailwindcss，autoprefixer]}），]，... - wkille

Answer 2

Tailwind 文档 在 svelte.config.js 中缺少一些配置。 以下的配置适用于新的 SvelteKit 项目。

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // here you enable postcss, and you can use @apply directive
    preprocess: preprocess({ postcss: true }),

    ...
};

export default config;

- fsarter

---

svelte-preprocess 中的所有内容不是默认已启用了吗？ - ThatXliner

不，你应该明确启用postcss。 - fsarter

Answer 3

根据Tailwindcss文档，包括Svelte在内的框架组件中不能使用@layer和@apply。解决方法是创建自己的插件来定义可应用的类。请参考Tailwindcss文档。

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white');
          borderRadius: theme('borderRadius.lg');
          padding: theme('spacing.6');
          boxShadow: theme('boxShadow.xl');
        }
      })
    })
  ]
}

- Cristóvão Trevisan

---

文档提到你不能在组件的样式中使用@apply，只能用于全局CSS中定义的自定义类。 OP并没有尝试在自定义类中使用@apply。 - Letik