Slim 模板和 TailwindCSS 在类声明中使用“:”

Answer 1

另一个选项是将 Tailwind 配置为使用另一个分隔符，如下所示：https://tailwindcss.com/docs/configuration/#separator

// tailwind.config.js
module.exports = {
  separator: "_",
}

然后你可以做

.sm_bg-green-500

等等。

Tailwind 中还有类似

.w-1/2

的类名称，不受此设置的影响。您可以添加自定义类名称来解决这个问题，例如

// tailwind.config.js
module.exports = {
  …
  theme: {
    extend: {
      width: {
        "1-of-2": "50%"
      }
    }
  }
}

然后使用

.w-1-of-2

。

Answer 2

在类速记符号中不可能使用这些冒号。不过你可以执行以下操作

div class="bg-red-500.sm::bg-green-500.md:bg-blue-500.lg:bg-pink-500.xl:bg-teal-500"

这会产生所需的 HTML：

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>

Answer 3

有人建议的解决方案

module.exports = { separator: "_" }

很糟糕：

1. .sm_bg-green-500

   看起来比

   .sm:bg-green-500

更糟糕
2. 您可能会遇到诸如

   my-block__my-element

   之类的类名问题。 （对于某些任务，顺风是不够的，在这种情况下我使用 BEM 命名）

相反 – 使用命名类，例如：

/*app/assets/stylesheets/application.tailwind.css*/
.magic-btn {
  @apply bg-red-500 sm:bg-green-500;
}

在模板中：

btn.magic-btn

Answer 4

冒号问题已于 2020 年修复，但存在小数宽度/大小问题

..text-sm.px-4.py-2.5..

如果必须使用小数宽度，请将其添加到类属性中：

button.text-sm.px-4.text-center.inline-flex[class="py-2.5"]