Более чистый CSS в шаблонах ваших компонентов с помощью Tailwind и Headwind

TailwindCSS больше не существует: CSS-фреймворк, ориентированный на утилиты, прошел долгий путь и теперь используется во множестве сайтов, таких как Proton, Laravel или даже GitHub Copilot (и, конечно, сам TailwindCSS)…

Однако подход, основанный на утилитах, имеет тенденцию делать наши атрибуты class немного многословными.

Само по себе это не является проблемой, но что может быть проблемой, так это согласованность между этими классами.

Проблема

Предположим, что я пишу кнопку, обернутую в контейнер. Я могу сделать следующее:

<div class="flex bg-gray-50 justify-center m-24 p-24">
  <button class="p-2 shadow-xl bg-fuchsia-400 text-white m-5">
    I don't do much
  </button>
</div>
Войти в полноэкранный режим Выйти из полноэкранного режима

Однако, если впоследствии мне придется изменить padding моих элементов, это будет довольно болезненно, поскольку я писал классы один за другим, не заботясь о каком-либо порядке. К сожалению, таким образом, мои классы не имеют логики упорядочивания, и мы можем заметить, что классы, влияющие на один и тот же аспект, перемешаны:

Головной ветер в помощь!

Эта проблема не редкость, и с тех пор ее решали различные инструменты.

Я использую Headwind, который определяет себя следующим образом:

Headwind — это сортировщик классов Tailwind CSS для Visual Studio Code. Он обеспечивает последовательное упорядочивание классов, анализируя ваш код и перепечатывая теги классов в заданном порядке.

Установка довольно проста и может быть выполнена через Visual Studio Marketplace.

Использование с Angular

После установки в VS Code давайте возьмем наш предыдущий код и создадим для него простой компонент:

// demo.component.ts
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
})
export class DemoComponent {}
Вход в полноэкранный режим Выход из полноэкранного режима
<!-- demo.component.html -->
<div class="flex bg-gray-50 justify-center m-24 p-24">
  <button class="p-2 shadow-xl bg-fuchsia-400 text-white m-5">
    I don't do much
  </button>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

И просто нажав кнопку сохранить, мы можем заметить, что Headwind позаботился об упорядочивании всех классов одинаковым образом:

А как насчет шаблонов?

Наш компонент довольно маленький, и можно было бы определить его шаблон прямо в нем:

// demo.component.ts
@Component({
  selector: 'app-demo',
  template: `
    <div class="flex bg-gray-50 justify-center m-24 p-24">
      <button class="p-2 shadow-xl bg-fuchsia-400 text-white m-5">
        I don't do much
      </button>
    </div>
  `,
})
export class DemoComponent {}
Вход в полноэкранный режим Выход из полноэкранного режима

Нажимаем сохранить и … ничего не изменилось?

Действительно, headwind не может распознать классы в шаблоне нашего компонента из коробки, и мы должны ему немного помочь.

В вашем VS Code settings.json, мы можем добавить пользовательские regexp, которые помогут headwind найти, где находятся наши классы. Вот два из них (от bbugh), для файлов .js и .ts:


"headwind.classRegex": {
  "javascript": "(?:\b(?:class|className|tw)(?:=(?:{\s*)?)?(?:\.\w*)?(?:\(\s*\w*\s*\))?[\"\'\`]((?:[\w\s\-\/\:\.\[\]]|\$\{(.*?)\})+)[\"\'\`]}?)",
  "typescript": "(?:\b(?:class|className|tw)(?:=(?:{\s*)?)?(?:\.\w*)?(?:\(\s*\w*\s*\))?[\"\'\`]((?:[\w\s\-\/\:\.\[\]]|\$\{(.*?)\})+)[\"\'\`]}?)"
  }
Войти в полноэкранный режим Выход из полноэкранного режима

Теперь мы можем снова сохранить и увидеть headwind в действии, как в нашем .html!

Лучший инструмент?

Ранее в этом году Tailwind объявил о выпуске плагина с Prettier.

Если мы посмотрим на историю репозитория, Headwind не имел обновлений с середины 2021 года (на момент, когда я пишу это) и, похоже, больше не поддерживается активно.

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


Я надеюсь, что вы узнали что-то полезное, счастливого кодинга!


Фото: lan deng on Unsplash

Оцените статью
devanswers.ru
Добавить комментарий