Рассмотрим Tailwind CSS

Что мне показалось интересным

Не нужно переключаться из HTML

Заголовок официального сайта Tailwind CSS гласит следующее:

Rapidly build modern websites without ever leaving your HTML.

Согласен, что написание кода в одном месте может быть быстрее, чем переключение между разными файлами. Однако переключиться со своего HTML-кода для меня не проблема. Это помогает сменить контекст переключаясь между разметкой и стилями. Когда я думаю об этом, отдельные HTML и CSS файлы помогают мне лучше сосредотачиваться на текущей задаче. Хотя, когда разметка и стили смешаны, всё может превратиться в бардак. Если вы работаете со сложным многоязычным, отзывчивым пользовательским интерфейсом, да ещё с поддержкой тем.

Когда я работаю с Tailwind CSS, я как будто держу в руках две ручки, одну для рисования, а другую для раскрашивания. Написание разметки и CSS иногда напоминает мне эти две ручки. Сильное отличие Tailwind CSS в том, что цветная ручка очень скована и ограничена. Другими словами, вам разрешено использовать только заранее определённые цвета.

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

Конструктивные ограничения

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

Именование CSS классов

Вам не нужно задумываться об именовании CSS классов. Это может ускорить реализацию веб-макетов.

Считаю это полезным, когда начальник отправляет е-мэйл о том, что нужно срочно создать лэндинг и у вас на это только 3 часа. Tailwind может вам помочь в достижении этого очень быстро. Однако, если вы будете придерживаться разделения разметки и стилей, на это уйдёт гораздо больше времени.

Другой полезное применение — это соревнование или хактон. Самое главное на таких мероприятиях — построить и заставить работать. Никого не волнует ваш CSS, верно?

С чем я не согласен

Это не utility-first фреймворк

Подзаголовок на сайте гласит:

A utility-first CSS framework packed with classes like…

Судя по тому, что я видел, это "utility-only" фреймворк. Может быть, наименование "utility-only" повлияет на то, как новички воспримут это? Мне редко удаётся увидеть веб-сайт, использующий Tailwind CSS и имеющий концепцию "utility-first".

Код может превратиться в бардак из-за длинного списка классов

Внимание, я знаю метод @apply.

Возьмём пример из документации Tailwind CSS.

<input
  class="block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:border-indigo-400 focus:placeholder-gray-400 focus:ring-2 focus:ring-indigo-200"
  placeholder="jane@example.com"
/>

Мы используем 17 классов для <input>. Что проще, читать классы по горизонтали один за другим или по вертикали? Вот как это будет выглядеть в CSS файле.

.c-input {
  display: block;
  appearance: none;
  background-color: #fff;
  @include placeholder(grey);
  border: 1px solid rgba(199, 210, 254, var(--tw-border-opacity));
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  line-height: 1.25rem;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
}

.c-input:focus {
  /* Focus styles.. */
}

Я могу прочитать и понять, что этот <input> содержит все эти стили быстрее, чем сканируя HTML. Это могут быть плагины для редакторов кода, которые автоматически форматируют классы HTML так, чтобы разделить их, но вы не сможете добиться этого в DevTools браузера.

Мне известен метод @apply, но каждый раз думая о нём, я обнаруживаю, что он противоречит основной концепции Tailwind CSS. Вот тоже с предыдущим примером.

.c-input {
  @apply block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:border-indigo-400 focus:placeholder-gray-400 focus:ring-2 focus:ring-indigo-200;
}

Посмотрите на длину этого списка классов.

Если цель Tailwind CSS — "utility-first", тогда почему @apple редко используется в его официальной документации или Tailwind UI? Опять же, я рассматриваю его как "utility-only" CSS фреймворк.

Вам всегда нужно будет придумывать названия

В дизайн-системе сложно обсудить конкретный компонент, не согласовав название для него. Дело в том, что вы не будете отправлять своему коллеге такое сообщение:

Привет, у нас есть новости о "bg-white w-full py-3 px-4"?

Вместо этого сообщение будет таким:

Привет, у нас есть новости по дизайну "polarized card"?

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

Я как-то шутил с другом, о том, что если мы уберём "традиционные имена" и вместо этого назовём себя вот так:

<person class="hair-brown length-[175] face-rounded"></person>

Это бессмысленно. Намного лучше так:

<person class="ahmad"></person>

Некоторые классы сбивают с толку

Когда я впервые начал использовать Tailwind CSS, мне нужно было добавить класс, отвечающий за align-items: center. Моей первой мыслью было использовать align-center, но это не сработало. Я заглянул в документацию и был сбит с толку.

Класс items-center добавит CSS свойство align-items: center, когда класс align-middle будет для vertical-align: middle. Это требует немного мышечной памяти и запоминания.

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

Усложняет настройку дизайна в браузере

Я занимаюсь дизайном и фронтенд разработкой, поэтому редактирование в DevTools браузера для меня чрезвычайно важно. Когда используется Tailwind CSS, это усложняется. Например, я хочу отредактировать отступ для компонента. Когда я редактирую значение класса py-3, это повлияет на каждый элемент на странице, который его использует.

Единственный способ удалить его — открыть меню .cls в DevTools, а затем переключить класс. Однако, это не решит проблему. В этом случае я могу добавить встроенный стиль через DevTools, что мне не нравится.

Эта проблема решается простым именованием компонентов.

Кроме того, общий размер файла полной сборки Tailwind CSS составляет 12 МБ. Редактирование CSS в DevTools будет очень медленным. Это значит — проектирование в браузере неэффективно.

Недавно команда Tailwind выпустила JIT-компилятор (как раз вовремя), который удаляет весь неиспользуемый CSS-код. Это предотвратит всю идею проектирования в браузере.

На рисунке выше я набрал текст и получил длинный список всех доступных CSS классов. С JIT этого не будет.

Не подходит для многоязычных сайтов

Я работаю над веб-сайтами, которые должны работать как на английском (LTR), так и на арабском (RTL) языках. Учтите следующее:

/* LTR: left to right */
.c-input {
  padding-left: 2rem;
}

В отдельном CSS файле для RTL стиль будет выглядеть так:

/* RTL: Right to left */
.c-input {
  padding-left: 0;
  padding-right: 2rem;
}

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

Первый найденный мной плагин делает следующее:

html[dir="rtl"] .ml-2 { margin-right: 1rem; }

Для меня это не лучшее решение. Следующие плагины не сильно отличались:

[dir="rtl"] .rtl\:text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

Это может быстро выйти из-под контроля. Недавно я рассматривал один веб сайт и заметил более 30 CSS классов.

Это пример того, как Tailwind CSS может выйти из-под контроля, особенно для новичков. Необходимость написания свыше 30 классов для компонента кнопки — это слишком. В таком случае, я лучше использую встроенные стили.

Сейчас я использую Bi-App Sass для создания многоязычного веб-сайта. Вот образец:

.elem {
  display: flex;
  @include margin-left(10px);
  @include border-right(2px solid #000);
}

Он компилируется в два разных CCS файла. Файл LTR:

/* LTR Styles */
.elem {
  display: flex;
  margin-left: 10px;
  border-right: 2px solid #000;
}

...и RTL:

/* RTL Styles */
.elem {
  display: flex;
  margin-right: 10px;
  border-left: 2px solid #000;
}

Прочитать больше о RTL стилях можно в этом руководстве (Eng).

Я не всегда работаю с шаблонами

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

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

Это делает веб-сайты похожими

Команда Tailwind создала набор хорошо продуманных компонентов под названием Tailwind UI. Которые легко настраиваются и готовы к использованию в вашем проекте.

Компоненты выглядят приятно и мне это нравится. Хотя есть проблема, если веб-сайт использует Tailwind UI, я с большой долей вероятности это предскажу.

Обычно, если вы используете Tailwind UI, значит у вас нет времени на создание индивидуального дизайна. Вам нужно что-то для быстрого запуска, не так ли? Это хороший вариант использования, за исключением того, что это делает сайты похожими друг на друга, как это было несколько лет назад с Bootstrap.

Некоторые CSS свойства и возможности нельзя использовать

Например, свойство clip-path не включено, и я полностью понимаю причину. Предположим, вы хотите включить его как компонент. Где мы должны подключить CSS?

<article
  class="block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3"
></article>

Либо мы можем его включить в конфигурацию Tailwind следующим образом:

// tailwind.config.js
module.exports = {
  theme: {
    clipPath: {
      // Configure your clip-path values here
    }
  }
};

Или мы можем сделать следующее:

.card {
  @apply block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3;
  clip-path: inset(20px 20px 50px 20px);
}

Заключительные мысли

Tailwind может генерироваться во время компиляции?

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

Служебные классы эффективные, если ими не злоупотреблять

В своих текущих проектах я использую комбинацию служебных классов и обычного CSS. Для меня это идеальное сочетание. Я не теряю возможностей служебных классов и в то же время использую их не загромождая HTML.