相关疑难解决方法(0)

我目前正在使用 TailwindCss 为我的下一个项目构建一个组件库，我在处理 Button 组件时遇到了一个小问题。

我传入一个类似于'primary'或 的道具'secondary'，它与我在中指定的颜色相匹配，tailwind.config.js然后我想使用Template literals如下方式将其分配给按钮组件：bg-${color}-500

<button
    className={`
    w-40 rounded-lg p-3 m-2 font-bold transition-all duration-100 border-2 active:scale-[0.98]
    bg-${color}-500 `}
    onClick={onClick}
    type="button"
    tabIndex={0}
  >
    {children}
</button>

类名在浏览器中显示得很好，它显示bg-primary-500在 DOM 中，但不显示在“应用的样式”选项卡中。

主题配置如下：

  theme: {
    extend: {
      colors: {
        primary: {
          500: '#B76B3F',
        },
        secondary: {
          500: '#344055',
        },
      },
    },
  },

但它不应用任何样式。如果我只是手动添加bg-primary-500它工作正常。

老实说，我只是想知道这是否是因为 JIT 编译器没有选择动态类名，或者我是否做错了什么（或者这不是使用 tailWind 的方式）。

欢迎任何帮助，提前致谢！

我目前正在编写一个带有 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 类匹配

我有一个变量，我想用它来定义一个带有 TailwindCSS 的类：

const frac = // some integer between 0 and 12

使用此变量，该类定义将按预期工作：

className={
      (frac === 0 ? "w-0" : "") +
      (frac === 1 ? "w-1/12" : "") +
      (frac === 2 ? "w-2/12" : "") +
      (frac === 3 ? "w-3/12" : "") +
      (frac === 4 ? "w-4/12" : "") +
      (frac === 5 ? "w-5/12" : "") +
      (frac === 6 ? "w-6/12" : "") +
      (frac === 7 ? "w-7/12" : "") +
      (frac …