Урок 02. Домашнее задание: проект курса

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

⚡ Кратко

Поднять свой проект на Vite с Tailwind, собрать продакшен-версию и зафиксировать размер итогового CSS — к нему вернёмся в конце курса.

Задание

Создайте проект tailwind-course, который вы будете развивать до конца курса: в нём появятся примеры из уроков, а в уроке 22 — итоговый дашборд.

  1. Проект на Vite с любым шаблоном (рекомендуется react-ts).
  2. Подключённый Tailwind через @tailwindcss/vite.
  3. Страница с карточкой из домашнего задания урока 01 — теперь уже в проекте.
  4. Собранная продакшен-версия и записанный размер файла CSS.

Подготовка окружения

node -v      # нужен Node.js 20 или новее
npm -v

npm create vite@latest tailwind-course -- --template react-ts
cd tailwind-course
npm install
npm install tailwindcss @tailwindcss/vite
Проверьте версию Node: старые версии не поддерживаются современными сборщиками. Если node -v показывает 18 или меньше — обновитесь, иначе ошибки будут выглядеть как «непонятный синтаксис».

Пошаговое решение

Шаг 1. Плагин в конфигурации

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

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

Перезапустите npm run dev после правки этого файла.

Шаг 2. Входной CSS

📄 src/index.css
@import "tailwindcss";

Всё лишнее из шаблона Vite (App.css, стили по умолчанию) удалите: они будут спорить с утилитами.

Шаг 3. Разметка

📄 src/App.tsx
import './index.css'

export default function App() {
  return (
    <main className="min-h-svh bg-slate-50 p-8">
      <div className="max-w-sm rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
        <h1 className="text-base font-semibold text-slate-900">Проект курса</h1>
        <p className="mt-1 text-sm text-slate-600">Tailwind подключён и работает.</p>
      </div>
    </main>
  )
}

Шаг 4. Продакшен-сборка

npm run build
# посмотрите размер файла в dist/assets/*.css
ls -l dist/assets

Запишите размер: в конце курса, когда в проекте будет полноценный дашборд, сравните — рост окажется гораздо меньше ожидаемого.

Как проверить

  • npm run dev открывает страницу, карточка оформлена.
  • В проекте нет tailwind.config.js.
  • В dist/assets появился CSS-файл, внутри есть правила вида .p-5.
  • Добавление нового класса в разметку меняет страницу без перезапуска сервера.

Результат должен выглядеть так:

Проект курса

Tailwind подключён и работает.

<div class="max-w-sm rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
  <h1 class="text-base font-semibold text-slate-900">Проект курса</h1>
  <p class="mt-1 text-sm text-slate-600">Tailwind подключён и работает.</p>
</div>