在 svelte 中添加动态类名

Question

我目前正在编写一个带有 svelte、sapper 和 tailwind 的应用程序。因此，为了让顺风工作，我已将其添加到我的汇总配置中

svelte({
        compilerOptions: {
          dev,
          hydratable: true,
        },
        preprocess: sveltePreprocess({
          sourceMap: dev,
          postcss: {
            plugins: [
              require("tailwindcss"),
              require("autoprefixer"),
              require("postcss-nesting"),
            ],
          },
        }),
        emitCss: true,
      })

总而言之，这些都是有效的，但我遇到了一些动态类名的问题。

写这样的东西似乎总是有效

  <div class={true ? 'class-a' : 'class-b'}>

两者class-a都class-b将包含在最终发出的 CSS 中，一切都按预期进行。

但是当我尝试添加变量类名时它不起作用。所以想象一下：

  <div class={`col-span-6`}>

它将完全按照预期工作，并且将从col-span-6tailwind 中的 css 类获得正确的样式。

但如果我把它改成这样：

  <div class={`col-span-${6}`}>

那么该样式将不会被包含在内。另一方面，如果我已经有一个带有该类的 DOM 元素col-span-6，那么样式将添加到这两个元素中。

所以我的猜测是编译器发现 css 没有被使用并且被删除了。我想我的问题是是否有任何方法可以强制顺风的所有造型？这样我就可以使用更动态的类名

不确定它是否相关，但我一直在测试它的组件有这个样式块

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

编辑：可以补充一点，我在日志中收到一堆打印，说有未使用的 css 选择器似乎与所有 tailwind 类匹配

Answer 1

我认为是purgeCSS（Tailwind 2.0内置）无法识别动态类。

为每个顺风类解决这个问题是很困难的，但是如果你没有很多这样的类，你可以手动安全地列出这些类名：

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],

    // These options are passed through directly to PurgeCSS
    options: {
      // Generate col-span-1 -> 12
      safelist: [...Array.from({ length: 12. }).fill('').map((_, i) => `col-span-${i + 1}`],
    },
  },
  // ...
}