Урок 02. Установка Tailwind CSS v4

📁 Раздел: Введение ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

⚡ Кратко

Способов подключить Tailwind v4 четыре, и выбирают их по типу проекта: плагин @tailwindcss/vite — для Vite (React, Vue, Svelte), @tailwindcss/cli — для статики без сборщика, @tailwindcss/postcss — для проектов с готовым PostCSS-конвейером, браузерная сборка — только для проб и обучения.

  • Во всех случаях в CSS появляется одна строка: @import "tailwindcss";
  • Файл tailwind.config.js в v4 не нужен.
  • Не забудьте подключить итоговый CSS в HTML — самая частая причина «ничего не работает».

О чём этот урок

Урок ставит Tailwind в проект и объясняет, что именно происходит при сборке. Разберём четыре способа установки, посмотрим на структуру проекта, настроим редактор и научимся понимать типовые ошибки установки — те, из-за которых «классы прописаны, а стилей нет».

Все команды и файлы проверены на реальном прогоне с Tailwind CSS 4.3 и Vite. Если вы встретите в интернете инструкцию с tailwind.config.js и тремя директивами @tailwind — это версия 3, см. «Старый vs Новый».

Структура урока

Теория

Что делает сборщик и какой способ установки выбрать.

Справочник

Команды установки и все ключи Tailwind CLI.

Примеры

Четыре установки по шагам с файлами проекта.

Старый vs Новый

Установка v3 против установки v4.

Задания

Поставить, собрать, посмотреть размер CSS.

Решения

Готовые конфигурации и команды.

Ошибки

«Стили не применяются» — пять причин.

Домашнее задание

Свой проект с нуля до собранного CSS.

Ресурсы

Официальные руководства по установке.

Практика

  • Создайте проект на Vite и подключите Tailwind плагином.
  • Соберите тот же проект вторым способом — через CLI — и сравните итоговые файлы.
  • Поставьте расширение Tailwind CSS IntelliSense для VS Code и проверьте автодополнение классов.

Навигация