Урок 02. Примеры: четыре способа установки

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

⚡ Кратко

Четыре установки по шагам: Vite, CLI, PostCSS и браузерная сборка. Выберите ту, что соответствует вашему проекту, — остальные пригодятся позже.

1. Vite + React: основной путь

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm install tailwindcss @tailwindcss/vite
npm run dev

📄 vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

📄 src/index.css

@import "tailwindcss";

📄 src/App.tsx

import './index.css'

export default function App() {
  return (
    <div className="flex min-h-svh items-center justify-center bg-slate-50">
      <h1 className="text-3xl font-bold text-slate-900">Hello world!</h1>
    </div>
  )
}

Структура проекта после установки:

my-app/
├── src/
│   ├── App.tsx
│   ├── index.css      ← @import "tailwindcss"
│   └── main.tsx
├── index.html
├── package.json
└── vite.config.ts     ← плагин tailwindcss()

2. Статический сайт: только CLI

Сборщик не нужен — достаточно двух файлов и одной команды в фоне.

npm init -y
npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

📄 src/input.css

@import "tailwindcss";

📄 index.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-50 p-8">
  <h1 class="text-3xl font-bold text-slate-900">Hello world!</h1>
</body>
</html>

Команда с --watch не завершается — она держит процесс и пересобирает CSS при каждом сохранении файла. Для финальной сборки запускают тот же вызов с --minify вместо --watch.

3. Проект с PostCSS

Если в проекте уже есть PostCSS (типично для Next.js и старых сборок на Webpack), Tailwind подключается как обычный плагин PostCSS.

npm install tailwindcss @tailwindcss/postcss postcss

📄 postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

В v4 сам пакет tailwindcss плагином PostCSS больше не является: нужен отдельный @tailwindcss/postcss. Если оставить старую запись, сборка упадёт с сообщением о том, что tailwindcss нельзя использовать напрямую как PostCSS-плагин.

4. Браузерная сборка: одна строка

Для урока, задачки или быстрой проверки идеи можно вообще ничего не ставить.

📄 prototype.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-slate-50 p-8">
  <h1 class="text-3xl font-bold text-slate-900">Hello world!</h1>
</body>
</html>

Так выглядит результат любого из четырёх способов — разница только в том, где и когда сгенерирован CSS:

Hello world!

<h1 class="text-3xl font-bold text-slate-900 dark:text-slate-50">Hello world!</h1>

5. Как убедиться, что сборка «видит» ваши файлы

Добавьте класс, которого раньше не было, сохраните файл и посмотрите итоговый CSS: правило должно появиться.

# после сборки ищем правило в выходном файле
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css
grep "rotate-45" ./dist/output.css

Пусто? Значит, файл с этим классом не попал в область сканирования — лечится директивой @source из урока 03.