Блог

Я не уверен, как правильно сформулировать этот вопрос. Я изучаю Попутный ветер, я не могу не заметить, насколько грязно писать из-за того, что html может превратиться в огромный суп из различных комбинаций классов в элементе, и мне в основном приходится повторять их для каждого общего элемента, который я в основном пишу. Возможно, я делаю это неправильно, хотя, пожалуйста, поправьте меня.

Мне было интересно, есть ли способ поместить класс css в объявление css, возможно, с использованием процессоров css?

 .this-button {
    .bg-red-500
    .rounded-lg
    .shadow-lg
    .animate-bounce
}
 

Я почти уверен, что это достижимо и с помощью Javascript. Я надеялся на решение с использованием Sass, но все было бы здорово. Что вы, ребята, рекомендуете, было бы хорошей практикой для управления комбинациями классов с длинным попутным ветром в элементах?

В sass вы можете смешивать свои классы таким образом:

 .some-class {
    @extend .bg-red-500
    @extend .rounded-lg
    @extend .shadow-lg
    @extend .animate-bounce
}
 

Теперь .некоторый класс содержит все свойства из этих классов.

В чистом css вы можете использовать директиву @applay. Пример из документов tailwind.

 .btn {
   @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}
 

Да, это возможно и делается с помощью «Извлечения компонентов»

Перейдите по этой ссылке, https://tailwindcss.com/docs/extracting-components

В .css файле, в котором вы выполнили импорт попутного ветра, вы можете использовать @apply директиву.

 @tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {    
  .this-button {
     @apply bg-red-500 rounded-lg shadow-lg animate-bounce;
  }
}
 

Для SASS того, чтобы перейти по этой ссылке, https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus