🛠️ Установка инструментов

Node.js, VS Code, расширения, Prettier — с нуля до рабочего окружения

Что понадобится

Курс не требует ничего экзотического: интерпретатор JavaScript для сборки CSS и редактор с подсказками. Всё остальное ставится в проект как обычные npm-пакеты.

Инструмент	Зачем в этом курсе	Обязателен
Node.js 20 или новее	на нём работает сборка Tailwind и CLI shadcn	да
npm	ставит пакеты; приходит вместе с Node.js	да
Visual Studio Code	редактор, для которого написаны все команды курса	да
Tailwind CSS IntelliSense	автодополнение классов, предпросмотр цвета, итоговый CSS при наведении	очень желателен
Prettier + `prettier-plugin-tailwindcss`	сортирует классы в каноническом порядке	желателен
Git	смотреть, что изменили команды `shadcn add`	по желанию

💡 Важно: Tailwind ставится не глобально на компьютер, а в конкретный проект — командой npm i внутри папки проекта. Глобально ставятся только Node.js и редактор.

Node.js и npm

Начиная с версии 4 Tailwind собирается движком, которому нужен современный Node.js. Проверьте, что он уже есть:

node -v
npm -v

Пример вывода на рабочей машине курса:

v24.14.1
11.11.0

Если команда не найдена или версия ниже 20 — ставьте заново.

Windows

winget install OpenJS.NodeJS.LTS

Либо установщик .msi с nodejs.org — берите ветку LTS, не Current. После установки закройте и откройте терминал заново: переменная PATH подхватывается только в новых окнах.

macOS

brew install node

Linux

Пакет из репозитория дистрибутива часто устаревший. Надёжнее поставить менеджер версий nvm и через него — LTS:

nvm install --lts
nvm use --lts

💡 Несколько версий Node на одной машине: если разные проекты требуют разного Node, поставьте nvm (на Windows — nvm-windows) и переключайтесь командой nvm use 20. Переустанавливать Node ради одного проекта не нужно.

npm отдельно ставить не надо — он идёт в комплекте с Node.js. Команда npx, которой курс запускает shadcn, тоже.

Visual Studio Code

Все команды и названия расширений в курсе даны для VS Code.

Система	Команда
Windows	`winget install Microsoft.VisualStudioCode`
macOS	`brew install --cask visual-studio-code`
Linux	пакет `.deb` / `.rpm` с code.visualstudio.com

Проверка — команда code -v печатает три строки: версию, хеш сборки и архитектуру:

1.134.0
110a328ea54b42367b803ec53ee0bf52ef26b419
x64

⚠️ macOS: команда code в терминале появляется не сразу. Откройте палитру команд (Cmd+Shift+P) и выполните Shell Command: Install 'code' command in PATH.

Расширения

Ставятся из Marketplace по кнопке или одной командой в терминале:

code --install-extension bradlc.vscode-tailwindcss
code --install-extension esbenp.prettier-vscode

Расширение	Идентификатор	Что даёт
Tailwind CSS IntelliSense	`bradlc.vscode-tailwindcss`	автодополнение имён классов, кружок с цветом рядом с `bg-*`, итоговый CSS во всплывающей подсказке, предупреждение о конфликте классов
Prettier	`esbenp.prettier-vscode`	форматирование по сохранению; именно через него работает сортировка классов

Проверить, что расширение встало:

code --list-extensions

В списке должна быть строка bradlc.vscode-tailwindcss.

Prettier и сортировка классов

prettier-plugin-tailwindcss — не расширение редактора, а npm-плагин, который ставится в проект:

npm i -D prettier prettier-plugin-tailwindcss

Файл .prettierrc в корне проекта:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Проверка — прогоните форматирование по файлу с разметкой и посмотрите на порядок классов:

npx prettier --write src/App.tsx

Плагин переставит классы в канонический порядок: сначала раскладка, потом отступы, типографика, цвет, состояния. Технически порядок в атрибуте ни на что не влияет — но одинаковый порядок во всём проекте резко упрощает чтение диффов.

Настройки редактора

Палитра команд → Preferences: Open User Settings (JSON). Для одного проекта те же ключи кладутся в .vscode/settings.json.

{
  "css.lint.unknownAtRules": "ignore",
  "editor.quickSuggestions": { "strings": "on" },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Ключ	Зачем
`css.lint.unknownAtRules`	встроенный CSS-линтер не знает директив Tailwind v4 (`@theme`, `@utility`, `@apply`, `@custom-variant`) и подчёркивает их как ошибку — здесь мы его глушим
`editor.quickSuggestions.strings`	подсказки классов внутри кавычек атрибута `class`; без этого IntelliSense молчит там, где он нужнее всего
`editor.formatOnSave` + `defaultFormatter`	классы сортируются сами при сохранении файла

Проверка, что всё встало

Пять команд, после которых можно начинать урок 02:

Команда	Ожидаемый результат
`node -v`	версия 20 или выше
`npm -v`	любой номер версии — значит npm на месте
`code -v`	три строки: версия, хеш, архитектура
`code --list-extensions`	в списке есть `bradlc.vscode-tailwindcss`
`git --version`	номер версии (если ставили Git)

Финальная проверка уже внутри проекта: создайте проект по уроку 02, откройте папку проекта в VS Code, начните печатать class="bg- — должен появиться список классов с кружками цвета. Если появился, окружение настроено полностью.

Частые проблемы

PowerShell отказывается запускать npm

Windows по умолчанию блокирует скрипты, и npm падает с сообщением «выполнение сценариев отключено в этой системе». Разрешите скрипты для своего пользователя (права администратора не нужны):

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

node -v показывает 18 или меньше

Движок Tailwind v4 на такой версии не запустится. Поставьте LTS заново или переключитесь через nvm use --lts.

IntelliSense не подсказывает классы

открыта папка проекта, а не одиночный файл — расширению нужен корень с package.json;
в проекте есть CSS-файл со строкой @import "tailwindcss";
в настройках включён editor.quickSuggestions.strings;
зависимости установлены: npm i отработал без ошибок.

Редактор подчёркивает @theme и @apply красным

Это встроенный CSS-линтер, а не ошибка кода. Лечится ключом css.lint.unknownAtRules из раздела выше.

Классы не сортируются при сохранении

Проверьте три вещи: плагин стоит в devDependencies, он прописан в .prettierrc, а форматтером файла выбран именно Prettier (в строке состояния внизу справа видно, какой форматтер применяется).

npx shadcn@latest init ругается на пути

CLI нужен проект с настроенными алиасами импорта. Разбор — в уроке 17.

Что дальше

Урок 02: Установка — создание проекта на Vite и подключение Tailwind плагином
Справочник CLI — все ключи @tailwindcss/cli и команд shadcn
Урок 17: Установка shadcn/ui — init, components.json, алиасы

⚠️ Проверить по документации: команды и версии проверялись на Windows (winget, PowerShell). Строки для macOS и Linux даны по официальной документации, но в этом окружении не запускались — сверьтесь с nodejs.org и docs VS Code. Номера версий в примерах — на момент написания курса; у вас они будут выше.