18.10.2021

В добрый путь, Tailwind CSS

В хороший путь, Tailwind CSS

От создателя: с годами CSS-фреймворки стали неописуемо распространенными в веб-дизайне: эстетика Google Material Design равномерно проявляется в Сети, а библиотека плагинов и тем Bootstrap становится пользующейся популярностью по умолчанию.

Отменная новость в том, что времена, когда странички выглядели так:

В хороший путь, Tailwind CSS

… издавна прошли, отчасти благодаря фреймворкам CSS.

Но, как и многие другие люди, вы сможете спросить, что я могу использовать, что еще не является мейнстримом? Есть ли наилучшее, более современное решение? Нет ли чего-то, что вообщем не связано с Google или Twitter?

Tailwind CSS, новый многообещающий фреймворк, который делает себе имя с 2017 года. Согласно данным State of CSS — Tailwind получил высшую оценку удовлетворенности и энтузиазма со стороны пользователей из более чем 100 государств как в 2019, так и в 2020 году.

В хороший путь, Tailwind CSS

Хороший интерес и удовлетворение от Tailwind

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

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

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

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

Как работает Tailwind?

Утилитарные классы

Tailwind — это утилитарный CSS-фреймворк. Утилитарный класс — это еще раз используемый класс CSS, который стилизует элемент для определенной цели.

Представим, мы ожидаем, что нескольким элементам будет нужно синий цвет фона. Чтобы создать утилитарный класс для этого, мы сделаем класс CSS с именем bg-blue и зададим ему стиль background-color: blue. Сейчас мы можем разместить наш служебный класс bg-blue на бессчетных элементах HTML, где фон должен быть голубым.

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

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

Это все, что вам необходимо сделать, чтобы получить стилизованную кнопку, которая смотрится следующим образом:

В хороший путь, Tailwind CSS

Tailwind предоставляет сотки, если не тысячи служебных классов, каждый из которых имеет определенные стили. Существует класс по имени .text-center с одним свойством CSS text-align:center, другой с именованием .p-8, который имеет padding:2rem, и так дальше. Так работает Tailwind.

Достоинства и недостатки

Плюсы

Более очевидным преимуществом использования служебных классов Tailwind является то, что служебные классы позволяет разработчику создавать свою разметку и стилизовать ее сразу без необходимости создания классов CSS (либо написания какого-либо CSS!). Разработчику, использующему Tailwind, никогда не придется отрешаться от кода HTML или JSX при разработке представлений и компонентов.

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

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

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

Минусы

Исходная кривая обучения Tailwind может быть непрезентабельной, поскольку вы неизбежно будете возвращаться к его документации, чтоб узнать правильное имя служебного класса. Что-то настолько же традиционное, как установка padding-top:1rem, с Tailwind будет pt-4. Сначала это могло потенциально перевесить все достоинства Tailwind в отношении скорости.

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

В хороший путь, Tailwind CSS

Имена классов с Tailwind для наполнения

Хотя Tailwind относительно малоизвестен, за ранее созданные служебные классы по-прежнему имеют данные значения. Например, text-red-300 это служебный класс для цвета текста с предустановленными значениями, в частности, для красноватого цвета: rgba(252, 165, 165, 1). К счастью, все эти значения по умолчанию можно поменять в файле tailwind.config.js в согласовании с вашими потребностями.

По умолчанию Tailwind не предоставляет никаких стилизованных компонент из коробки. Все компоненты, представленные в таковой библиотеке, как Bootstrap (например, общая навигация, кнопки, заглавия), необходимо реализовать с нуля.

Внедрение Tailwind и рабочий процесс

Для начала вам необходимо установить Tailwind с использованием npm. Чтоб получить последнюю версию и ее зависимости, запустите:

Если вы собираетесь делать собственные опции, запустите:

… чтоб создать файл tailwind.config.js. Этот файл позволяет настраивать стили, которые мы обсудим в последующем разделе.

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

CSS

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

Если вы собираетесь провести рефакторинг и, может быть, даже удалить Tailwind в будущем, непременно соедините свой код Tailwind с файлами SASS либо Styled Component. Помните об этих деталях, чтоб сделать кодовую базу более чистой.

Конфигурация Tailwind

Быстрее всего, вы собираетесь настраивать свои служебные классы Tailwind, поэтому что давайте будем честными, служебная библиотека Tailwind включает не все. К примеру, для любой пользовательской анимации, кроме пульса либо отскока, потребуется конфигурация. Чтобы настроить ее, непременно запустите:

Это создаст малый файл настроек tailwind.config.js в корне проекта. Тут вы можете установить все, что вам может пригодиться, что не включено по умолчанию в Tailwind, к примеру, пользовательские шрифты, анимацию, определенные брейкпоинты либо настроить предварительно созданные служебные классы Tailwind. Любые пользовательские стили тут будут иметь приоритет над существующими классами Tailwind.

JavaScript

Tailwind с другими пакетами стилизации

Тривиальная проблема с Tailwind — это массивные имена классов, которые в конечном итоге загромождают ваш HTML либо JSX. Если мы посмотрим на предшествующий пример для кнопки, полный список используемых классов будет bg-blue-300 rounded-md shadow-md text-center. Если бы мы желали добавить больше стилей, нам понадобилось бы еще больше служебных классов, что сделало бы нашу строчку еще длиннее.

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

JavaScript

Вероятные решения этой проблемы включают сочетание Tailwind с SASS либо стилизованными компонентами.

SASS с внедрением @apply

Обычная практика с Tailwind — сочетать его использование с SASS / SCSS. Я считаю полезным правило ограничить количество служебных классов хоть какого HTML-элемента до 5 или 6. Если элемент просит дальнейшей стилизации, вы можете использовать @apply для стилизации класса SASS с помощью служебных классов Tailwind, к примеру:

CSS

Потом, вы можете установить этот класс там, где вам необходимо.

Cтилизация компонентов с внедрением tw.macro

Чтобы использовать Tailwind вкупе со стилизованными компонентами, нам понадобятся некие дополнительные зависимости, а именно tailwind.macro и babel-plugin-macros. Композиция этих двух параметров позволит Babel читать утилиты Tailwind.

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

JavaScript

Создание отзывчивости

Медиа-запросы

Одним из приятных преимуществ использования Tailwind является простота адаптивного стиля. По умолчанию Tailwind нацелен на мобильные устройства с точки зрения скорости реагирования. Другими словами, брейкпоинты под капотом определяются с помощью min-width.

В этом примере font-size и padding поменяются при достижении брейкпоинта md, а font-size будет возрастать еще больше при достижении брейкпоинта lg. Чтоб узнать точные размеры для таких размеров, как md либо lg, вам нужно будет обратиться к документации Tailwind для определенных атрибутов. Что касается брейкпоинтов, то sm равно 640px, md равно 768px и lg равно 1024px по умолчанию. Все это можно настроить, в файле tailwind.config.js. К примеру, если вы хотите передать md равно 800px, вы сможете изменить это в tailwind.config.js.

JavaScript

Заключение

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

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

По материалам webformyself.com

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

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