Рубрики
Верстальщику Разработка

Tailwind CSS: to use, or not to use?

Я немного опоздал с этой статьей поскольку пару месяцев назад вышло довольно много материалов, особенно в англоязычном Вебе о Tailwind CSS. Но, имея реальный опыт использования этого фреймворка на реальном продакшн проекте, я все-таки решил написать этот пост.

Лично я был весьма доволен результатом моей работы с фреймворком, однако объективно понимал, что это не совсем то, что можно назвать «best practice» в мире CSS. Именно в силу своих двояких чувств я решил написать этот материал, в котором для себя и может еще для кого-то кто думает попробовать этот фреймворк разложить все по полочкам. Когда-то давно я уже публиковал пост с размышлениями о том, стоит ли вообще использовать CSS фреймворки. Теперь, когда для многих вопрос с использованием не возникает вообще, стоит рассмотреть конкретный пример.

Популярный CSS фреймворк для тех, кто не знает CSS

Если вы не знаете CSS хорошо, то есть имеете определенные навыки, но не знаете всех тонкостей и не вникали в спецификации, то скоре всего, Tailwind CSS вам понравится!

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

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

И для кого-то, кто не сильно знаком с CSS, все доводы выше покажутся не такими уж и весомыми, но не для всех…

Особенности Tailwind CSS

Фреймворк использует утилитарный подход, который пересекается с концепцией атомарного CSS. То есть, вы можете использовать низкоуровневые CSS класс типа flexpt-4text-center, для того чтобы задавать отображение вашего блока. Если говорить грубо, то в некоторых ситуациях (или в идеальных случаях) вам даже не потребуется собственный файл стилей.

Компактный в продакшене

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

Отзывчивый и низкоуровневый

Низко-уровневость фреймворка поистине впечатляет, так как вам доступны утилитарные классы не только для нормальных состояний, но и для адаптивных разметок и даже для состояний :hover, :active, :focus.

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

Концепция слоев

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

@tailwind base;
@tailwind components;
@tailwind utilities;

Но самое интересное в том, что вы можете расширить любой из слоев используя специальную директиву @layer:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

Теперь в итоговом коде CSS в базовом слое будут добавлены ваши кастомные стили.

Функции и директивы

Tailwind CSS предлагает удобные инструменты в виде функций и директив, которые делают фреймворк очень гибким. Помимо описанной выше директивы @layer, есть еще очень полезная директива @apply.

Эта директива позволяет использовать утилитарные классы непосредственно внутри вашего файла стилей для компонента:

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}

Не знаю, насколько это действительно нужно, но возможность есть.

Плагины

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

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

Atomic CSS как основа утилитарных классов фреймворка

Идея атомарного CSS не нова. Еще в 2015 году году этот подход активно развивался во фронтенде и даже на то время имел многих приверженцев, однако и противников было немало.

Данный подход полностью исключает семантические и вразумительные имена классов, делает ваш HTML код крайне неприглядным. Но при этом, допустим для прототипирования, это действительно очень полезный инструмент.

Но это было пока не появились еще более «радикальные» подходы как, например, CSS-in-JS, Styled и прочее. И вот именно сегодня идея атомарного похода с декларативными классами кажется уже вполне приемлемой.

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

Полный обзор концепции атомарного CSS не является целью этого материала, но если вы хотите углубиться в детали, то есть относительно неплохая довольно свежая статья на английском «Введение в Атомарный CSS«.

Использование идеи кастомизации

Одной из отличительных особенностей фреймворка является очень гибкая кастомизация. Используя файл tailwind.config.js вы можете как переопределить базовые настройки переменных темы, так и расширить наборы собственными дополнительными вариантами, а также создавать полностью кастомные свойства. Поскольку это обычный JavaScript гибкость действительно впечатляет. Вдобавок к этому вы можете настроить и PostCSS (как базис для фреймворка) используя собственный postcss.config.js файл.

Более того, вы можете использовать функции темы, переменные из нее и другие настройки непосредственно в коде ваших компонентов используя resolveConfig хелпер:

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'

Раздел документации по настройкам фреймворка содержит исчерпывающую информацию о всех возможностях.

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

To Use, or Not to Use?

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

Учитывая тот факт, что на сегодняшний день люди создают отдельные курсы типа «CSS для JavaScript разработчика» идея использования Tailwind CSS на проекте где нет чистого «верстальщика» весьма заманчивая. Фреймворк прекрасно структурирован и документирован и есть шанс получить гораздо меньше плохо CSS.

Однако, если у вас на проекте есть «CSS-ниндзя» который ведет фронт, скорее всего, у него будут возражения. Вероятно, это будет касаться всех тех недостатков которые есть у атомарного CSS. Возможно, многих будут смущать раздутые наборы CSS классов у элементов или данный подход просто вам не подойдет в силу специфичности проекта.

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

2 ответа к “Tailwind CSS: to use, or not to use?”

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *