Тонкие шаблоны и TailwindCSS используют ':' в объявлении класса - PullRequest
Новая
       31

Тонкие шаблоны и TailwindCSS используют ':' в объявлении класса

0 голосов
/ 29 мая 2019

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.

До сих пор я добился определенного прогресса, используя Rails 'content_tag: 

= content_tag :span, 'Accounts', class: 'invisible md:visible lg:visible'

Но с этим я могу пойти только так.

1 Ответ

0 голосов
/ 06 июня 2019

Просто невозможно использовать эти двоеточия в сокращенной записи класса. Вы можете сделать следующее, хотя 

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>
...