Тонкие шаблоны и TailwindCSS используют ':' в объявлении класса
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>
Кажется, что двоеточие ':' интерпретируется как несколько элементов html. Мне интересно, есть ли способ обойти это? Я бы хотел использовать Slim с TailwindCSS.
До сих пор я добился некоторого прогресса, используя content_tag Rails:
= content_tag :span, 'Accounts', class: 'invisible md:visible lg:visible'
Но я могу зайти так далеко с этим.
Ответы 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>
Другой вариант — настроить Tailwind для использования другого разделителя, как описано здесь: https://tailwindcss.com/docs/configuration/#separator.
// tailwind.config.js
module.exports = {
separator: "_",
}
Тогда вы могли бы сделать .sm_bg-green-500 и так далее.
Есть также имена классов, такие как .w-1/2 в Tailwind, на которые эта настройка не влияет. Вы можете добавить пользовательские имена классов обойти это, например.
// tailwind.config.js
module.exports = {
…
theme: {
extend: {
width: {
"1-of-2": "50%"
}
}
}
}
а затем используйте .w-1-of-2.
Обратите внимание, что в Slim 4.1.0 улучшена поддержка Tailwind без некоторых из следующих вещей: github.com/slim-template/slim/pull/841
(slim теперь поддерживает ":" в именах классов)