От автора: наверное, вам пока мало что известно о Tailwind CSS. Мы переживаем ренессанс удивительных веб-платформ и адаптивного дизайна. Адаптивные пользовательские интерфейсы в основном реализуются с помощью таких библиотек, как Bootstrap, Foundation, Bulma или старых добрых медиа-запросов.
Мы с легкостью использовали эти наборы пользовательского интерфейса для реализации директив, чтобы добиться точного пользовательского интерфейса и надлежащего отклика при меньшем количестве кода. Но главный вопрос в том, действительно ли мы делали все правильно?
Что если бы был способ построения адаптивного пользовательского интерфейса, не ограничиваясь правилами какого-либо комплекта пользовательского интерфейса? Есть ли способ добиться адаптивности и при этом сохранить дизайн пользовательского интерфейса? Что ж, давайте узнаем.
Что такое Tailwind CSS?
В соответствии с официальной документацией, Tailwind CSS — это CSS-фреймворк утилит для быстрого создания пользовательских интерфейсов. Мне нравится думать, что это крутой способ определения встроенных стилей и создания потрясающего интерфейса без написания ни единой строки собственного CSS.
На мой взгляд, одна вещь, которую большинство разработчиков могут найти непривлекательной в Tailwind CSS, это то, что ваша разметка выглядит намного более загруженной, чем вы могли бы желать. Tailwind — не первая CSS-библиотека утилит, но она наиболее популярна на данный момент.
С чего начать
Хотя CDN является хорошим способом импорта стилей в проекте, многие функции Tailwind CSS недоступны при использовании сборок CDN. Чтобы в полной мере воспользоваться возможностями Tailwind, установите Tailwind через npm.
1. Установите Tailwind через npm
Tailwind доступена на npm и может быть установлен с использованием npm или Yarn.
|
1 2 3 4 |
# Using npm npm install tailwindcss --save-dev # Using Yarn yarn add tailwindcss --dev |
2. Создайте файл конфигурации Tailwind
Tailwind настроена почти полностью на простом JavaScript. Для этого вам нужно сгенерировать конфигурационный файл Tailwind для проекта. Рекомендуется создать файл tailwind.js в корне проекта. Утилита CLI помогает легко с этим справиться.
|
1 2 3 4 |
# Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename] |
Если вы опытный пользователь Tailwind, которому не нужны комментарии в файле конфигурации, вы можете использовать флаг —no-comments при создании файла конфигурации, чтобы удалить их. Для получения дополнительной информации о настройке, ознакомьтесь с официальной документацией.
Проблема с наборами пользовательского интерфейса
Прежде всего, давайте посмотрим, что мы делаем, и как мы можем улучшить работу по добавлению гибкости в среду. Затем мы рассмотрим, почему использование наборов пользовательского интерфейса, вероятно, не лучший выбор в свете новой информации.
Фреймворки, такие как Bootstrap, абстрагируют создание компонентов до такой степени, что заставляют разработчиков использовать только доступные шаблоны. То же самое касается других UI фреймворков на базе наборов.
Кто-то может поспорить, что переопределение фреймворка с помощью собственного CSS — это вариант, но если мы много переопределим, то есть ли смысл использовать фреймворк вообще? Мы включим библиотеку и все еще будем писать свой собственный код — это дополнительные файлы, о которых нужно беспокоиться, и мы даже не экономим время.
Еще одна проблема, которую я обнаружил с сайтами на Bootstrap, заключается в том, что они почти всегда выглядят одинаково, поэтому это препятствует возможность внедрять креатив в среду разработки. Это одно из преимуществ Tailwind CSS: его способность легко создавать сложные пользовательские интерфейсы, и при этом любые два сайта не будут выглядеть одинаково.
Что вообще означает «utility-first»?
Utility-first библиотека означает, что, в отличие от Bootstrap, Tailwind не предоставляет нам автоматически предварительно установленные компоненты. Скорее, он дает нам служебные классы, которые помогают стилизовать компонент определенным образом, и позволяет создавать собственные классы, используя эти служебные классы. Давайте объясним это на двух простых примерах.
Пример 1: Демо простой кнопки
Из приведенного выше примера мы видим, как легко реализовать компонент кнопки с помощью Tailwind CSS.
Пример 2: Демо простой карточки
Приведенный ниже код является простым примером карточки, созданной с помощью фреймворка Tailwind CSS — и, если вы знакомы с CSS, вы, возможно, уже сможете разобрать некоторые вещи, происходящие со стилем. Поначалу может быть немного сложно запомнить все это, но как только вы разберетесь с синтаксисом, все будет в порядке.
Фрагмент кода ниже содержит контейнер, у которого для больших экранов добавлена тень — с помощью класса shadow-lg, и белый фон, реализованный с помощью bg-white. Также можно заметить, что классы px-4 и py-1просто помогают заполнить отступы по осям X и Y для кнопки сообщения.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden"> <div class="sm:flex sm:items-center px-6 py-4"> <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="//avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt=""> <div class="text-center sm:text-left sm:flex-grow"> <div class="mb-4"> <p class="text-xl leading-tight">Adam Wathan</p> <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p> </div> <div> <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button> </div> </div> </div> </div> |
Вот ссылка на CodePen, которая показывает, как выглядит приведенный выше код:
Есть ли преимущество в производительности при использовании Tailwind CSS?
В конфигурации по умолчанию Tailwind поставляется в размере 36.4kb минимизированного g-zip кода. По сравнению с 22.1 КБ Bootstrap Tailwind тяжелее на 14.3 КБ. Вы могли бы подумать: «Это действительно существенно с точки зрения производительности?»
Причина этого проста: Tailwind поставляется со множеством вариантов и стилей, которые могут выбирать пользователи, и упаковывает все эти варианты, чтобы уменьшить необходимость написания собственного CSS. К счастью, Tailwind предоставляет несколько стратегий, которые вы можете использовать, чтобы сгенерированный CSS был компактным и производительным.
Ограничьте цветовую палитру
В связи с тем, что все встроенные служебные модули в Tailwind используют под капотом систему плагинов, можно удалить кучу кода и организовать систему плагинов таким образом, как регистрируются новые классы в Tailwind.
Это позволяет получить в проекте только тот код, который нам действительно необходим, игнорируя все остальное — в отличие от Bootstrap, в котором много лишнего кода. Эта функция обновления сокращает время сборки с 158 до 8 секунд.
Мы можем получить точное количество цветовых вариаций, которые нам нужны в проекте, например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// ... module.exports = { // ... textColors: { 'black': colors['black'], 'grey-darker': colors['grey-darker'], 'grey-dark': colors['grey-dark'], 'red-dark': colors['red-dark'], 'red': colors['red'], 'blue-dark': colors['blue-dark'], 'blue': colors['blue'], // ... } } |
Удалите неиспользуемый CSS с помощью PurgeCSS
Tailwind также удаляет неиспользуемый CSS с помощью PurgeCSS, инструмента для удаления неиспользуемого CSS из проекта. Это делается путем простого сравнения имен классов CSS, доступных в шаблоне, с именами используемых классов, а затем удаления неиспользуемого CSS.
Выберите точное количество размеров экранов, которое вам нужно
Tailwind позволяет выбрать точное количество размеров экрана, которое вам нужно. Вот как определение меньшего количества экранов влияет на результат:
5 размеров экрана (по умолчанию): 36,4 КБ
4 размера экрана: 29,4 КБ
3 размера экрана: 22,4 КБ
2 размера экрана: 15,4 КБ
1 размер экрана: 8,4 КБ
Итак, насколько гибок Tailwind CSS?
Готовы ли вы к этому? Уверены ли вы? Итак, Tailwind настолько гибок, что позволяет добавлять собственные утилиты и предоставляет руководство по их реализации.
Давайте возьмем в качестве примера простую реализацию стиля. Обычная настройка Tailwind — это отдельный файл CSS, который выглядит следующим образом:
|
1 2 3 4 5 |
@tailwind preflight; @tailwind components; @tailwind utilities; |
Таким образом, чтобы переопределить утилиты по умолчанию, нам нужно импортировать переопределение последним, чтобы оно применялось первым (общее правило CSS):
|
1 2 3 4 5 6 7 8 9 |
@tailwind preflight; @tailwind components; @tailwind utilities; .bg-cover-image { background-image: url('/path/to/image.jpg'); } |
Но если вы используете импорт postcss или препроцессор, такой как Less, Sass или Stylus, лучше всего сохранить утилиты в отдельном файле и импортировать их:
|
1 2 3 4 5 6 7 |
@tailwind preflight; @tailwind components; @tailwind utilities; @import "leveledup-utilities"; |
Примечание. То же самое можно сделать для адаптивных макетов. Пользовательские утилиты всегда будут иметь приоритет над префиксными утилитами, если это сделано правильно.
Извлечение шаблонов утилит с помощью @apply
Итак, допустим, вы повторно использовали определенный стиль кнопок в нескольких местах. Повторное определение спецификации одного и того же типа для одного и того же компонента является немного утомляющим. Не беспокойтесь: у Tailwind есть способ повторно использовать стили с помощью @apply. Вот пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<button class="btn-gray"> Button </button> <style> .btn-blue { @apply bg-gray text-white font-bold py-2 px-4 rounded; } .btn-gray:hover { @apply bg-gray-dark; } </style> |
Примечание: варианты утилит hover:, focus: и {screen}: не могут быть смешаны непосредственно.
Готов ли Tailwind к продакшн?
Tailwind CSS только что выпустил версию 1.0.0.beta со следующими функциями:
Расширение цветовой палитры по умолчанию
Эта новая версия Tailwind поставляется с некоторыми обновлениями, чтобы обеспечить гибкость в использовании цветовых оттенков, заменив оригинальную систему с семью оттенками, от самого темного до самого светлого на новую числовую систему цветов с девятью оттенками, где 100 — самый светлый оттенок, а 900 — самый темный оттенок.
Использование прогрессивной шкалы maxWidth
В то время как у нас уже была линейная шкала для maxWidth (10rem), это обновление подключает прогрессивную шкалу, где значение ширины увеличивается, и теперь у нас есть больше вариантов по умолчанию — от 9 до 12. Эту шкалу maxWidth по умолчанию можно переписать, указав значения, которые вам нужны для вашего собственного проекта в файле конфигурации:
|
1 2 3 4 5 6 7 |
module.exports = { theme: { maxWidth: { // Your values go here... }, }, } |
И многое другое — оно также становится более стабильным и готовым к продакшн.
За ним действительно будущее?
Tailwind CSS использует набор служебных классов, которые позволяют работать именно с тем, что вам нужно. На мой взгляд, это отличный способ создания пользовательских интерфейсов, более гибкий для творчества разработчиков.
Еще одно преимущество, которое я действительно ценю — и я уверен, что каждый фронт-энд разработчик также это оценит — никогда не нужно беспокоиться об изменениях одного элемента, затрагивающих другой связанный элемент. Больше не нужно переходить назад и вперед между HTML и таблицами стилей в редакторе, больше не нужно возвращаться, чтобы проверить, как вы назвали этот другой элемент. На мой взгляд, за этим будущее.
Начните работать с этим удивительным фреймворком. Удачного кодирования!
Автор: Obinna Ekwuno
Источник: //blog.logrocket.com
Редакция: Команда webformyself.
