Различие между «Компонентами» и «Утилитами» в CSS-трюках Tailwind

Вот очень быстрый совет. Вы можете думать об утилитах Tailwind как о компонентах, потому что вы можете буквально создать их. card «Компоненты» из утилит Tailwind.

@utility card {
  border: 1px solid black;
  padding: 1rlh;
}

 ... 

Это стирает грань между «компонентами» и «утилитами», поэтому нам необходимо лучше определить эти термины.

Великое разделение – и великое объединение

Разработчики CSS часто определяют компоненты и утилиты как:

1. Компонент = группа стилей
2. полезность = то же правило

Это коллективное мышление возникло из словаря, который мы накопили за многие годы. К сожалению, это не совсем правильная терминология.

Итак, давайте сделаем шаг назад и рассмотрим реальный смысл этих слов.

Компонент Это означает: вещь, которая является частью большего целого.

полезность Значение: Это полезно.

так…

• Утилиты являются компонентами Потому что они все еще являются частью более крупной группы.
• утилиты компонентов Потому что они полезны.

Разделение компонентов и утилит на самом деле является маркетинговым ходом, направленным на продажу этих служебных платформ, и не более того.

это. Фактически. нет. Случай.

Значимое разделение?

Возможно, единственное значимое разделение между компонентами и утилитами (как они обычно определялись до сих пор) заключается в том, что мы часто хотим перезаписать стили компонентов.

Это создает примерно такую ​​карту:

• Компонент: группы стилей
• Утилиты: Стили, используемые для перезаписи стилей компонентов.

Лично я считаю, что это очень узкое определение того, что на самом деле означает «полезный».

просто перезапиши чертов стиль

Tailwind предоставляет нам невероятную функцию, позволяющую перезаписывать стили компонентов. Чтобы использовать эту функцию, вам необходимо:

• Напишите стили компонентов в components слой.
• Перезапишите стили с помощью утилиты Tailwind.

@layer components {
  .card {
    border: 1px solid black;
    padding: 1rlh;
  }
}

 ... 

Но это трудный способ сделать что-то. представьте, что пишите @layer components Во всех ваших файлах компонентов. При этом есть две проблемы:

1. Вы теряете возможность использовать утилиты Tailwind в качестве компонентов.
2. Вам придется загромождать свои файлы множеством вещей @layer component Объявления — это дополнительный отступ, который делает весь CSS немного сложнее для чтения.

Есть лучший способ сделать это — мы можем изменить способ использования слоев CSS, написав утилиты в качестве компонентов.

@utility card {
  padding: 1rlh; 
  border: 1px solid black;
}

Затем мы можем перезаписать стили другой утилитой, используя Tailwind. !important Прямые модификаторы в HTML:

 ... 

Я подал пример на игровой площадке Tailwind.

нетрадиционный попутный ветер

Эта статья взята непосредственно из моего курса, нетрадиционный попутный ветерЗдесь вы узнаете, как синергетически использовать CSS и Tailwind. Если вам это понравилось, то внутри вас ждет гораздо больше: практические способы обдумывания и использования Tailwind + CSS, которых вы не найдете в учебниках или документации.