Веб-разработка

Учебник Tailwind CSS для начинающих

25 уроков · 6 разделов · бесплатно, без регистрации

Начать с первого урока

Tailwind CSS — это utility-first фреймворк, который меняет привычный подход к стилизации: вместо написания собственного CSS вы собираете дизайн прямо в разметке из маленьких классов-утилит. Этот курс проведёт вас от первой установки до уверенной вёрстки реальных компонентов — кнопок, карточек, навбаров и адаптивных сеток. Вы узнаете, как устроены отступы, цвета, типографика, Flexbox и Grid в Tailwind, как делать mobile-first адаптивность, обрабатывать состояния (hover, focus, dark), переиспользовать стили и настраивать тему под свой проект. Курс рассчитан на тех, кто уже знает HTML и базовый CSS.

Курс «Tailwind CSS» состоит из 6 разделов и 25 уроков: Введение в Tailwind, Основы стилизации, Раскладка, Адаптивность и состояния, Переиспользование и кастомизация и Практика: компоненты. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Введение в Tailwind

    1. Что такое utility-first и зачем это нужно

      Объясняем подход utility-first в Tailwind CSS, чем он отличается от обычного CSS и в чём его практическая выгода.

    2. Tailwind против обычного CSS и Bootstrap

      Сравниваем Tailwind с написанием обычного CSS и с компонентными фреймворками вроде Bootstrap: плюсы, минусы и критика.

    3. Установка: CDN, CLI и сборщик

      Три способа подключить Tailwind CSS: play CDN для проб, CLI и интеграция со сборщиком вроде Vite. Что выбрать и почему.

    4. Как Tailwind сканирует классы

      Как Tailwind собирает только используемые классы через настройку content и почему имена классов нельзя склеивать из кусочков.

  2. 2 Основы стилизации

    1. Отступы: padding, margin и space

      Управляем внутренними и внешними отступами в Tailwind: классы p-*, m-*, оси x/y и утилиты space-* между элементами.

    2. Размеры: ширина, высота, min и max

      Управление размерами в Tailwind: классы w-*, h-*, дробные и процентные ширины, min-w/max-w и ограничение ширины контента.

    3. Цвета и палитра

      Цветовая система Tailwind: классы text-*, bg-*, border-* и шкала оттенков от 50 до 950 для текста, фона и рамок.

    4. Типографика: размер, начертание, межстрочье

      Утилиты текста в Tailwind: размеры text-sm/lg, начертание font-bold, межстрочный интервал leading и трекинг tracking.

    5. Границы, скругления и тени

      Декор элементов в Tailwind: толщина и цвет рамок, скругление углов rounded-*, кольца ring и тени shadow-*.

  3. 3 Раскладка

    1. Display: block, flex, grid, hidden

      Базовые режимы display в Tailwind: block, inline-block, flex, grid и hidden для скрытия элементов.

    2. Flexbox: ряды и выравнивание

      Flexbox в Tailwind: flex, направление, justify-* и items-* для выравнивания по осям, gap-* для зазоров и flex-1.

    3. Grid: сетки из колонок

      CSS Grid в Tailwind: grid-cols-* для колонок, col-span-* для растяжения, gap для зазоров и адаптивные сетки.

    4. Позиционирование и слои

      Позиционирование в Tailwind: relative и absolute, классы inset/top/right для координат и z-* для порядка наложения.

  4. 4 Адаптивность и состояния

    1. Брейкпоинты и mobile-first

      Адаптивность в Tailwind по принципу mobile-first: префиксы sm, md, lg, xl и как они переопределяют базовые стили.

    2. Состояния: hover, focus, active, disabled

      Варианты-псевдоклассы Tailwind: hover, focus, active и disabled для интерактивных состояний кнопок и полей.

    3. Группы и группировка состояний

      Группы в Tailwind: класс group и вариант group-hover, чтобы реагировать на наведение на родителя, а не на сам элемент.

    4. Тёмная тема и произвольные значения

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

  5. 5 Переиспользование и кастомизация

    1. Длинные строки классов: проблема и решения

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

    2. @apply и компонентные классы

      Директива @apply в Tailwind: как собрать утилиты в именованный класс, слой components и когда это уместно.

    3. Кастомизация темы в tailwind.config

      Настройка темы Tailwind: добавление своих цветов, шрифтов и брейкпоинтов через theme.extend в tailwind.config.js.

    4. Плагины и оптимизация сборки

      Обзор официальных плагинов Tailwind (typography, forms) и как content обеспечивает маленький итоговый CSS.

  6. 6 Практика: компоненты

    1. Кнопка и карточка

      Разбираем разметку кнопки и карточки на Tailwind: отступы, цвета, состояния hover и тени — по классам.

    2. Навбар и форма

      Разметка адаптивного навбара и формы на Tailwind: flex justify-between, поля ввода с focus-кольцом и метки.

    3. Модалка и адаптивная сетка карточек

      Разметка модального окна на Tailwind (fixed-подложка, центрирование) и адаптивная сетка карточек на grid-cols.

    4. Tailwind с React/Vue и инструменты

      Как Tailwind сочетается с React и Vue, плагин сортировки классов для Prettier, расширение IntelliSense и что учить дальше.