如何使用 Svelte 组件中的 tailwinds @apply 和 @layer 指令

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>

我想这样使用它：

<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文件中的行之前输入相同的 css 指令，@tailwind utilities或者使用该@layer components指令，它可以正常工作：

/* 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 将.custom-button我在CustomButton.svelte组件中定义的设置添加到组件层，以便可以用内联类覆盖它。

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任何组件中的指令。

有什么方法可以实现这一目标吗？

Answer 1

我可以通过将 @tailwind 指令和函数导入到 config 中来在 SvelteKit 上使用它：

// svelte.config.js

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

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

注意：这已经在我的 postcss.config.cjs 文件中设置，但它不起作用。

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

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

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

Answer 2

根据Tailwindcss 文档，您不能在框架组件内使用 @layer 和 @apply，包括 Svelte（它实际上提到了它）。解决方案是创建您自己的插件来定义适用的类：

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');
        }
      })
    })
  ]
}