Tailwind CSS

NOTE: This article is also available in English and you can read it here.

Каскадные таблицы стилей — это сложно. Или нет? Мне кажется, что ответ на этот вопрос не может быть однозначным.

CSS — прекрасный инструмент, позволяющий нам создавать удобные и адаптивные интерфейсы для приложений и сайтов, которые мы разрабатываем. Основная проблема, по моему мнению, состоит не в первоначальном создании визуальной составляющей интерфейса, а в постоянно возрастающей сложности поддержки кодовой базы CSS по мере развития проекта. В решении этой проблемы нам могут помочь различные методологии, которые позволяют навести порядок в нашем CSS. Среди них стоит отметить самые распространённые: BEM, SMACSS и Atomic CSS. На проектах, в которых мне довелось принимать участие чаще всего приживался именно BEM, видимо благодаря своей простоте и доступности. Atomic CSS при первом взгляде на примеры кода всегда вызывал отторжение, потому как разметка превращалась в мешанину атомарных классов, которые были трудночитаемыми. И вот в 2020 году вдруг начала набирать популярность библиотека, которая в своей основе проповедует именно атомарный подход в описании стилей для разметки. Этой библиотекой была Tailwind CSS. Первой моей мыслью было: «Мы ведь все это уже проходили!», но присмотревшись к примерам и документации на официальном сайте я все же решил попробовать использовать данный подход на каком-то небольшом проекте, у которого не было бы чётких требований к дизайну интерфейса.

И вот, супруга попросила меня создать клон одного из моих старых web-приложений MotoQuotes для использования в своём новом проекте 13сhats. MotoQuotes был написан уже достаточно много лет назад с помощью Backbone JS и я решил, что использовать подобный стек в конце 2020-го года не выглядит таким уж привлекательным занятием. Я давно хотел попробовать фреймворк Svelte и этот проект предоставлял для этого прекрасную возможность. Дело в том, что мне хотелось побольше посмотреть именно в сторону нового JS фреймворка и не тратить время на то, чтобы нарисовать и реализовать хотя бы минимально симпатичный интерфейс. Именно по этой причине мой выбор пал на Tailwind CSS. И могу сказать что, к моему собственному удивлению, мне понравилось 🙂. Мне кажется, что это отличный инструмент именно для подобных небольших проектов (хотя я конечно же могу ошибаться).

Начнём с преимуществ, которые нам предоставляет Tailwind CSS:

• самое главное что, по моему мнению, выгодно отличает этот инструмент среди возможных конкурентов — прекрасная дизайн-система и значения по умолчанию. С их помощью становится возможным создание опрятного интерфейса даже для человека, который достаточно далёк от принципов дизайна, типографики и, тем более, теории цвета;
• небольшой размер CSS в финальной сборке проекта. Благодаря этому инструменту именно наша разметка напрямую регулирует количество стилей, которые попадают в финальный бандл, а благодаря атомарному подходу осуществляется максимально возможное переиспользование CSS деклараций;
• скорость разработки. У Tailwind CSS достаточно интуитивные имена классов, что позволяет достаточно быстро освоиться и перестать заглядывать в документацию в поисках подходящего. Отдельного упоминания заслуживает плагин Tailwind CSS IntelliSense для Visual Studio Code, который предоставляет автодополнение и fuzzy-поиск по всем существующим в библиотеке именам классов, добавляет линтинг и подсветку синтаксиса.

Но, как и любое другое решение, Tailwind CSS имеет ряд своих недостатков:

• вы, как разработчик, вряд ли сможете создать интерфейс используя исключительно возможности этой библиотеки, если ваш дизайн заранее определён. Скорее всего вам понадобится производить значительные изменения в дизайн-системе Tailwind CSS или же описывать ряд дополнительных CSS классов для проекта. Но стоит всегда помнить о том что если вы планируете в будущем хоть как-то поддерживать свой проект – не стоит смешивать в нем разные методологии или подключать большое количество несвязанных друг с другом инструментов;
• разметка даже относительно простого элемента интерфейса будет выглядеть перегруженной большим массивом атомарных классов. Все ещё больше усложняется необходимостью использовать состояния по типу hover, active и т.д. Эта проблема частично решается созданием необходимых компонентов внутри выбранного вами компонентно-ориентированного фреймворка, но вам так или иначе придётся описать с помощью атомарных классов даже самую простую кнопку внутри вашего приложения.

Какой же я сделал для себя вывод? Скорее всего я ещё вернусь к этой библиотеке в своих будущих проектах. Но это будут side-projects или небольшие проекты на стадии, когда для них ещё не предъявляются требования конкретного дизайна. Tailwind CSS позволит вам больше сосредоточиться на логике вашего приложения и не так сильно волноваться по поводу того, что его внешний вид оставляет желать лучшего 😉