TailwindCSS: Попутный ветер перемен

Денис Русаков

О чём поговорим?

Основы
Использование инструмента
Возможности и оптимизация
Кейсы из жизни разработчиков
Библиотеки и плагины
Альтернативы
Выводы

Проблемы сейчас

Большое кол-во дублей в сборке
Импорт конфигов в каждом файле
Некоторые препроцессоры устарели
Повторяющиеся обертки-компоненты (Box, Flex, Grid)
Необходимо писать темизацию

Что ты такое Tailwind ?

TailwindCSS — utility-first CSS framework...

Документация

Utility-first — создание сложных компонентов из ограниченного набора примитивных утилит

Просторы интернета

Utilities — набор классов, которые применяются к HTML-элементам для быстрого и гибкого создания стилей

Документация

State of CSS

Использование инструмента

Шаг 1

Шаг 2

Шаг 3

Синтаксис

[class]

flex
text-white
pt-2

Синтаксис

[state][separator][class]

hover:bg-sky-700
focus:bg-sky-700
disabled:bg-sky-700

[screen][separator][class]

sm:bg-sky-700
md:bg-sky-700
lg:bg-sky-700

Разметка

Стили

Класс «зомби»

Большое кол-во классов

Tailwind CSS Devtools

gimli-tailwind

Возможности

Конфиг

Core plugins

Цвета

Тёмная тема

Брекпоинты

Брекпоинты в скриптах

Шрифты

Отступы

!important

!important плохо

«Вес» селектора

Анимации

Keyframes

Блокировка классов

Preflight

preflight

Вендорные префиксы

Доступность

Prefix для классов

Подключение плагинов

Полная конфигурация здесь

Директивы

@supports
@layer
@apply
@config

@supports

@layer

@apply

@config

Функции

theme()
screen()

theme()

screen()

Just In Time (JIT)

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

Документация

Оптимизация

Сочетание минимизации и сетевого сжатия приводит к созданию CSS файлов размером менее 10 КБ даже для больших проектов. Например, Netflix использует Tailwind для Netflix Top 10, а весь сайт передает по сети только 6,5 КБ.

Документация