При написании этой статьи, я вдохновлялся трудом Stephanie Zhan под названием "6 Reasons Why You Should Start Using Tailwind CSS"

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

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

И так, начнем :)

Адаптивность UI "в одну строчку"

Ушли в прошлое те дни, когда для того, чтобы сделать UI отзывчивым и адаптивным, разработчикам нужно было писать сложные media запросы. С помощью Tailwind CSS, добиться адаптивности UI так же просто как добавить классы к элементам HTML. Вместо того, чтобы определять media запросы в отдельном CSS файле, всё что необходимо - это просто указывать ожидаемое адаптивное поведение как определенные значения атрибута class.

Например, предположим вы хотите, чтобы в зависимости от размера экрана, у какого-либо текстового элемента менялся размер шрифта. Применяя Tailwind CSS, этого можно добиться, просто добавив к элементу определенные классы, определяющие адаптивность текста, такие как text-lg, text-sm или text-xl:

<span class="lg:text-lg sm:text-sm xl:text-xl">Hello, from Tune-it!</span>

Такой подход "в одну строчку" к реализации адаптивности сильно экономит время разработки и устраняет необходимость в написании и управлении сложными media запросами.

Интерактивность UI с помощью inline (встроенных) псевдоклассов

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

К примеру, если вы хотите изменять цвет текста элемента на синий при наведении на этот элемент, всё что вам нужно - это добавить значение "hover:text-blue-500" к аттрибуту class элемента:

<span class="text-4xl hover:text-blue-500">Hello, from Tune-it!</span>

Фреймворк поддерживает множество псевдоклассов, среди которых focus, active и др. Таким образом, можно легко добавлять интерактивность в UI без написания каких-либо дополнительных кастомных CSS правил.

Простота кода с помощью inline стилей

Tailwind CSS значительно упрощает написание, чтение и поиск кода CSS. Часто бывает так, что для того чтобы понять как оформлен элемент, необходимо искать и просматривать требуемый CSS файл (а порой и несколько файлов). В Tailwind CSS можно определить все стили элемента непосредственно в самом элементе. Таким образом, достигается следующий эффект: смотря на HTML-разметку элемента, вы сразу видите его CSS стили. И это действительно очень удобно.

Например, рассмотрим следующий код, который создает стилизованный компонент "Карточка (card)":

<div class="rounded bg-gray-500 p-4">I'm a card!</div>

В этом примере, стиль карточки определен непосредственно в самом компоненте (в атрибуте class), что упрощает понимание и сопровождение кодовой базы.

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

Повторное использование кода с помощью Компонентно-ориентированного подхода

При работе с Tailwind CSS вы можете столкнуться с необходимостью многократного применения набора классов. Чтобы избежать дублирования кода, Tailwind CSS позволяет создавать пользовательские классы стилей с помощью директивы @apply.

Например, предположим, в вашем проекте требуется создать несколько различающихся друг от друга компонентов типа "Карточка", которые тем не менее имеют что-то общее между собой (ведь все они "Карточки" в конце концов :) ). Вместо того чтобы повторять одни и те же классы каждый раз, вы можете определить пользовательский класс .card и применять его везде, где это необходимо:

.card {
    @apply rounded bg-gray-300 p-4;
  }

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

Настройка фреймворка под пользовательские требования к дизайну

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

Из коробки фреймворк уже идет с настроенным по умолчанию набором опций (цвета, единицы размера, точки включения/переключения режимов адаптивности и пр.). Если же конфигурация по умолчанию не соответствует потребностям вашего проекта, вы можете гибко настроить её под свои нужды.

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

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

Используется только те стили, которые действительно нужны в проекте

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

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

Чтобы включить очистку (purge), необходимо в конфигурации указать те файлы, которые Tailwind CSS будет проверять на наличие используемых стилей.

Например:

// tailwind.config.js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.jsx',
  ],
  // other configuration options
};

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

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

Конец статьи.