Шесть причин, по которым вам стоит начать использовать Tailwind CSS

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


Инлайновая отзывчивость

Позади те дни, когда нам приходилось писать медиа запросы, чтобы обеспечивать отзывчивость наших веб-страниц. С помощью Tailwind можно прописывать адаптивную стилизацию прямо в атрибуте class элементов. Рассмотрим наглядный пример; код ниже позволяет изменять размер текста на основании размера экрана.

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

Это действительно впечатляет: с помощью всего трех CSS классов мы сделали размер шрифта элемента отзывчивым.

Инлайновые псевдо-классы

Вы можете добавлять псевдо-классы к элементу прямо в его атрибуте class. К примеру, вы хотите, чтобы цвет текста менялся при наведении на элемент. С Tailwind CSS это сделать очень просто:

<span class="text-4xl hover:text-blue-500">Hello, world!</span>Image for post

Таким образом вы можете использовать не только hover, но и другие псевдо-классы, к примеру focus и active. Подробнее об этом можно почитать в документации Tailwind CSS.

Инлайновая стилизация

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

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

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

Компоненты для избежания повторений

Если вы уже используете Tailwind CSS какое-то время, вы можете заметить, что повторяете некоторые наборы классов снова и снова. В этом случае вы можете использовать @apply, чтобы комбинировать нужные классы в один. К примеру, я заметил, что при стилизации карточек повторяю rounded bg-gray-300 p-4 снова и снова. Чтобы избавиться от этой проблемы, я создал собственный класс card и применил к нему эти классы:

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

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

Если вы используете JavaScript библиотеку вроде React или Vue, вы можете создать отдельный компонент и применить эти стили к нему, чтобы избежать повторений.

Вот пример на React:

const Card: React.FC = ({children}) => {
  return <div className="rounded bg-gray-300 p-4" >{children}</div>
}

Подробнее изучить использование Tailwind CSS с компонентами JavaScript библиотек можно по ссылке.

Кастомизация

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

Избавление от ненужных стилей

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

Чтобы решить эту проблему, мы можем избавиться от всех стилей, которые не используются нашим приложением. В Tailwind есть встроенный инструмент, позволяющий это сделать. Для этого нам необходимо добавить свойство purge в конфигурацию Tailwind и прописать, какие файлы ему необходимо отслеживать. К примеру, пример ниже позволяет проверять все HTML и JSX файлы и отслеживать, какие классы в них используются:

...  
  purge: [
    './src/**/*.html',
    './src/**/*.jsx',
  ]
...

Подробнее об этом можно прочесть здесь.

Послесловие

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

Leave a Comment

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

Scroll to Top