Мое мнение касательно TailwindCSS после использования его на коммерческом проекте

Так получилось, что я уже давно обратил внимание на возрастающую популярность за рубежом фреймворка Tailwind CSS , в т.ч. на Stackoverflow. Проект очень активно развивается и имеет достаточно большое компьюнити.

И вот после определенных испытаний и экспериментов над фреймворком, у меня наконец-то появилась полноценная возможность применить его в одном из коммерческих проектов.

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

Что такое Tailwind CSS

Tailwind CSS — это CSS фреймворк, который содержит в себе огромное количество служебных классов, существенно облегчающих верстку.

Отличительной чертой этого фреймворка является концепция "utility-first" при котором классы создаются именно для элементарных стилей (т.е. классы-утилиты), а не для отдельных компонентов, таких как меню, кнопки и пр.

<!-- Пример кода на Tailwind CSS -->

<div class="py-12 text-center">
  <h2 class="text-2xl font-light tracking-widest">
    …
  </h2>
  <img class="mx-auto mt-5 mb-7" src="…" />
  <p class="text-sm text-darkgray">
    …
  </p>
  <p class="mt-6">
    <a class="text-2xl font-bold uppercase tracking-normal transition hover:text-gold" href="…">
    …
    </a>
  </p>
</div>

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

Особенности именования классов в Tailwind

Ознакомиться со всеми встроенными базовыми классами данного фреймворка вы можете на сайте Tailwind CSS в разделе документации. Примером такого является <div class="h-5">…</div> где h-5 является предопределенным классом с определенным значением height. Но прикол в том, что фреймворк поддерживает также и динамически генерируемые классы на основе специального описания их названия. Например, если вам необходим класс под определенную высоту, а предустановленные вас не устраивают, вы можете написать прямо так: <div class="h-[35rem]">…</div> и при сборке проекта, Tailwind сгенерирует одноименный класс с заданной высотой. Также можно расширять и остальные классы.

Модификаторы классов

Часто при разработке меня раздражало описывать hover, focus и пр. эффекты, особенно если их много, используются они всего пару раз и все они разнообразные. Подобное обозначение условий, при которых CSS класс в Tailwind активен на элементе, реализуется при помощи модификаторов, которые прописываются как префикс к имени класса. Многие модификаторы являются сокращенными аналогами CSS псевдоклассов (hover, focus, first-child, last-child, ...), псевдоэлементов, медиавыражений и пр.

Пример написания модификатора, где кнопка изначально имеет частично прозрачный фон, а при наведении прозрачность фона исчезает:

<button class="bg-opacity-70 hover:bg-opacity-100">…</button>

Какие-то модификаторы одноименные, такие как hover: , focus: и пр. Часть модификаторов являются сокращениями, такими как first: (аналог CSS :first-child), last: (аналог CSS :last-child), odd (аналог CSS :nth-child(odd)) и пр. Список модификаторов большой и постоянно расширяется, поэтому с их актуальным описанием лучше знакомиться непосредственно в разделе документации.

Модификаторы адаптивности

Для поддержки различных CSS медиа-выражений, в Tailwind есть множество модификаторов, обозначающих определенные размеры видимой области.

Примеры базовых предопределенных модификаторов точек остановки:

Сразу уточню, что эти модификаторы, как и многие другие, могут быть изменены или расширены через файл конфигурации (tailwind.config.js).

Использование произвольных селекторов в виде модификатора

Названия классов могут включать в себя не только "состояние" элемента, но также и вложенность, по аналогии с CSS селекторами:

<ul class="[&>li>a]:bg-opacity-70">
  <li>
    <a>…</a>
  </li>
  …
</ul>

В этом примере фон всех вложенных ссылок будет частично прозрачным, т.е. нет необходимости всем ссылкам внутри расставлять класс bg-opacity-70.

Это очень удобно, поскольку позволяет не повторять кучу раз одно и тоже (помните принцип DRY — Don't Repeat Yourself).

Преимущества и недостатки Tailwind по сравнению с Bootstrap

На данный момент, одним из популярнейших фреймворков для построения внешнего вида веб-приложений является известный Bootstrap. Данный фреймворк стабилен, имеет серьезную поддержку различным инструментарием, широко распространен, поскольку на нем довольно таки легко по-быстрому накидать приятный веб-интерфейс приложения, без серьезных заморочек с кроссбраузерностью. Популярность у Bootstrap была такова, что его базовый стиль до сих пор проглядывается во многих современных веб-приложениях.

Лично я к Bootstrap раньше (до 5-ой версии) относился довольно таки скептически, поскольку ранее он был сильно громоздким во всех смыслах. Если приходилось отходить от стандартного внешнего вида, приходилось делать кучу дополнительной работы как при разработке, так и при последующей поддержке. Более-менее, по-настоящему гибким Bootstrap стал начиная с 4-ой версии благодаря поддержке нативного CSS Flexbox.

Именно "CSS фреймворком" Bootstrap стал именно с 5-ой версии, когда JS библиотеки (в т.ч. JQuery) стали не обязательными и при этом в нем стали активно применяться CSS Variables, а с версии 5.1.3 в Bootstrap уже появилась какая-никакая поддержка CSS Grid. И именно благодаря тому, что фреймворк перестал быть привязанным к JQuery, с тем же Vue его можно использовать напрямую, без использования Bootstrap-Vue, у которого непонятно что с развитием.

Но даже с учетом прогрессивных изменений в Bootstrap 5, на мой взгляд он для разработки сайтов не очень подходит. При попытках переиспользовать его готовые компоненты, придется либо принимать компоненты и их возможности как есть, либо практически полностью их переписывать. А если формировать компоненты с нуля, то в Bootstrap не так много утилитарных классов, особенно по сравнению Tailwind.

Если говорить более упрощенно, то в случае, если вам нужно побыстрому накидать внешний вид для вашего приложения, то Bootstrap вам отлично подойдет. Если же вы делаете сложный и разнообразный UI с активным применением всех возможностей нового CSS, то по сравнению с Bootstrap, Tailwind более предпочтителен.

Тем, кто уже знаком с утилитарными классами Bootstrap, Tailwind может показаться знакомым, поскольку в нем так-же используются классы, наподобие h-… (height), m-… (margin), p-… (padding) и т.д.

Проблема засорения кода обширным количеством классов и её решение

На мой взгляд основным недостатком использования Tailwind является некоторая "замусоренность" HTML, что является следствием приверженности концепции "utility-first". На практике выясняется, что часто элементы могут содержать в себе по 5-10 и более CSS классов, особенно если учитывать активное использование модификаторов классов, для адаптивности и различных эффектов:

<a class="flex h-full flex-col place-content-center p-7 decoration-gold decoration-2 underline-offset-8 hover:underline group-hover:text-white" href="…">…</a>

Выглядит местами зачастую не очень, поэтому подобные классы можно упаковать в один, при помощи директивы @apply:

.btn {
  @apply flex h-full flex-col place-content-center p-7 decoration-gold decoration-2 underline-offset-8 hover:underline group-hover:text-white;
}

<a class="btn" href="…">…</a>

Так уже выглядит компактнее, а также позволяет использовать уже существующие руководства по оформлению кода (styleguide) верстки, что полезно для командной работы.

Tailwind и кроссбраузерность

Поддержка браузеров в Tailwind имеет свои особенности, т.к. фреймворк сам по себе особо не предоставляет кроссбраузерность и во многом полагается как на постпроцессоры, так и на базовые знания в специфике кроссбраузерной разработки.

Как пример, Tailwind во всю поддерживает работу с CSS свойством backdrop-filter, но в тоже время это свойство стало полноценно поддерживаться во всех основных версиях браузеров совсем недавно.

Такое решение имеет свои преимущества, т.к. позволяет реализовать подход "Graceful Degradation" для тех браузеров, которые не поддерживают какие-то современные свойства, при этом не ограничивая себя в применении этих современных свойств.

Поддержка Tailwind в различных инструментах разработки

TailwindCSS и VSCode

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

К счастью, разработчики фреймворка предоставляют официальное расширение для VSCode - Tailwind CSS Intellisense. JetBrains Webstorm также поддерживает Tailwind, но о качестве ничего не могу сказать т.к. не пробовал, поскольку с Tailwind я работаю из под VSCode.

Что меня очень порадовало, так это то, что расширение сразу после установки работает вполне хорошо без каких либо донастроек. Конечно там все достаточно широко настраиваемо на вкус и цвет, но для начала работы это не обязательно.

Tailwind и Prettier

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

Одним из популярнейших решений является использование универсального Prettier, для которого разработчики Tailwind создали официальное расширение — prettier-plugin-tailwindcss.

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

Заключение

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

Для простых проектов, в которых надо побыстрому накидать UI для форм, данный фреймворк не подойдет, поскольку широкий набор типовых компонентов и тем распространяется отдельно как коммерческое решение. Но вот как инструмент для упрощения работы с сложной в плане разнообразия версткой, Tailwind является отличным решением.