Tailwind CSS — Почему стоит это использовать или как полюбить стилизацию
Предисловие
Всем привет.
Небольшое предисловие - Я фронтенд разработчик с чуть более годом коммерческой разработки, потому множество каких-либо нюансов и тонкостей могу не знать и то, обилие рабочих кейсов которые существуют - также мне могут быть неведомы в силу скромного опыта, однако я искренне хочу поделиться своим опытом использования Tailwind CSS и рассказать о своем пути от ненависти и брюзжания в стороны, когда видел предоставляемый синтаксис стилизации компонентов от вышеупомянутого инструмента до восторга и неподдельного удовольствия использования всех предоставляемых удобств Tailwind`a.
Что такое Tailwind CSS
Tailwind CSS - CSS-фреймворк, внешне очень напоминающий Bootstrap: стилизация здесь также задается уже предустановленными классами, непосредственно в HTML, JSX или другом документе, где строится каркас приложения, однако можно использовать и более привычный подход, например модули CSS, но об этом позже.
Почему Tailwind, если есть Bootstrap?
Минимализм и гибкость: Tailwind предоставляет только готовый набор классов, которые вы можете объединять в один класс, если у вас существуют случаи, когда множество классов повторяются, то их можно объединить в один. Если необходимо, то вы также можете модифицировать уже существующие классы или создать свой класс со своими параметрами.
Скорость загрузки: Tailwind обычно загружается быстрее, чем Bootstrap, потому что он не включает в себя готовые компоненты, использующие JS, что может замедлить загрузку страницы
Поддержка тем: Tailwind предлагает поддержку тем, что позволяет вам легко изменять внешний вид вашего веб-сайта, не изменяя код.
Не симпатичный синтаксис
Одна из главных проблем, почему мои коллеги не хотели использовать Tailwind заключалась в том, что их пугал не самый привлекательный синтаксис, когда разметка у нас становится необычайно раздутой за счет множества строк в одном атрибуте class или className, однако и для этого есть решение: есть множество плагинов, которые помогают нам просто свернуть все классы и после этого заниматься исключительно логикой приложения, не отвлекаясь на большое количество классов. Для VSCode, например, есть расширение «Inline Fold».
Подсказки при заполнении классов
При наборе классов вам не придется запоминать каждое название, что уже существует в Tailwind, вам достаточно начать набор какого-либо символа и вы увидите удобную всплывающую подсказку с подробным описанием того, какие параметры имеет тот или иной класс
Удобная документация
У данного плагина очень удобная документация, в пару кликов можно найти интересующий вас параметр через поиск или боковую панель и узнать как данный параметр используется в Tailwind
Маленький вес CSS
Tailwind автоматически удаляет весь неиспользуемый CSS при сборке для производства, что означает, что ваш окончательный набор CSS является наименьшим из возможных. Фактически, большинство проектов Tailwind отправляют клиенту менее 10 КБ CSS.
Удобство при дебаггинге
На моей практике довольно часто встречалось, что когда бы я хотел найти нужный компонент, то это представлялось не простой задачей, в то время, как мы использовали SCSS modules, то автоматически добавлялись префиксы к классам во избежание дублирования, потому нельзя было скопировать весь класс и найти нужный компонент сразу. С использованием Tailwind же теперь это возможно сделать. Кроме того, у данного плагины существует автоматический сортировщик классов, который за вас позаботится о том, чтобы порядок классов соответствовал тому расположению, которому задумывалось изначально разработчиками.
И да, даже «новая» документация React написана с использованием Tailwind и еще очень много популярных и крупных проектов.
Наличие множества UI библиотек
Существует большое множество UI библиотек, построенных на базе Tailwind, что еще больше уменьшает конечный бандл и ускоряет разработку. Одна из моих любимых - DaisyUI
Опыт использования
Долгое время я не решался использовать Tailwind в своих проектах, так как мне тоже не нравилась концепция огромного HTML кода, где классы могут достигать монструозных размеров и засорять дальнейший просмотр кода, но в какой-то момент я решил себя пересилить и понять, почему западные коллеги, а в частности, западные ютуберы все поголовно используют tailwind. И тут я натыкаюсь на видео fireship'a, где он подробно расписывает все плюсы этого плагины и упоминает дополнительный инструмент inline fold, который как раз таки освобождает меня от проблемы за наблюдением больших классов в компонентах. Я решаюсь себе дать 2 дня беспрерывного использования tailwind и сразу же начинаю чувствовать его удобство, я серьёзно, я был в восторге от того, как можно быстро стилизовать кнопку в симпатичном стиле. Я уже тогда стал подумывать о том, какой была бы симпатичной наша админка для одного нашего проекта, если бы изначально использовали tailwind и то, как быстро бы мы это стилизовали. Прошло некоторое время и я предложил тимлиду для нового проекта использовать tailwind, он согласился и... Мне ещё никогда так приятно верстать не было, не нужно создавать отдельный документ css, сразу же в одном файле видишь какая стилизация у элемента, нужно покопаться в логике - шорткатом скрываешь классы и начинаешь работу, просто фантастика!
В конечном итоге проект мы отдали заказчику и успешно выпустили его в продакшен и он по сей день работает.
Заключение
В заключении, я бы, наверное, всё же хотел порекомендовать Tailwind для разработчиков, инструмент очень удобен и приятен в использовании.
Я рассказал только о самых основных моментах, которые понравились конкретно мне и не претендую на то, что данный инструмент может служить панацеей от всех проблем в мире фронтенда по стилизации, но то количество решений, который он предлагает - внимания заслуживает.