提问人：greyoxide 提问时间：5/30/2019 更新时间：10/21/2023 访问量：1915
Slim 模板和 TailwindCSS 在类声明中使用 ' ： '
Slim templates and TailwindCSS use ' : ' in class declaration
问：
TailwindCSS 看起来像一个很棒的前端工具，但我想知道如何将它与 Rails Slim 模板语言一起使用？
例如：
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>
如果我运行它HTML2SLIM我会得到这个建议：
.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 class="md">
<bg-blue-500 class="lg">
<bg-pink-500 class="xl">
<bg-teal-500></bg-teal-500>
</bg-pink-500>
</bg-blue-500>
</bg-green-500>
</div>
似乎冒号“：”入为多个htmlelemments。我想知道是否有办法解决这个问题？我很想将 Slim 与 TailwindCSS 一起使用。
到目前为止，我在使用 Rails 的content_tag方面取得了一些进展：
= content_tag :span, 'Accounts', class: 'invisible md:visible lg:visible'
但我只能走到这一步。
答：
2赞
fphilipe
6/6/2019
#1
只是不可能在类速记符号中使用这些冒号。不过，您可以执行以下操作
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>
评论
0赞
sknight
11/27/2023
必须添加带有 class 属性的 div 很糟糕，但这是最好的解决方案。
6赞
Henrik N
11/26/2019
#2
另一种选择是将 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
评论
2赞
Henrik N
6/27/2020
请注意，Slim 4.1.0 改进了对 Tailwind 的支持，而无需执行以下操作： github.com/slim-template/slim/pull/841
0赞
Lev Lukomskyi
3/25/2023
#3
正如有人建议的那样，解决方案很糟糕：module.exports = { separator: "_" }
.sm_bg-green-500看起来比.sm:bg-green-500- 您将遇到类名问题，例如 .（对于某些任务，顺风是不够的，在这种情况下我使用 BEM 命名）
my-block__my-element
取而代之的是 - 使用命名类，例如：
/*app/assets/stylesheets/application.tailwind.css*/
.magic-btn {
@apply bg-red-500 sm:bg-green-500;
}
在模板中：
btn.magic-btn
0赞
appleII717
10/21/2023
#4
冒号问题已于 2020 年修复，但十进制宽度/大小有问题
..text-sm.px-4.py-2.5..
如果必须使用十进制宽度，请将其添加到类属性中：
button.text-sm.px-4.text-center.inline-flex[class="py-2.5"]
评论