Решение задания 1

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

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

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

@import "tailwindcss";

Почему так: плагин встраивается в конвейер Vite и обрабатывает любой CSS, где встретился @import "tailwindcss". Файл конфигурации не нужен: список сканируемых файлов Tailwind определяет сам, отталкиваясь от корня проекта и .gitignore.

Результат в браузере:

<h1 class="text-3xl font-bold underline">Hello world!</h1>

Решение задания 2

npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

<link href="./dist/output.css" rel="stylesheet">

Почему так: CLI делает ровно то же, что плагин, но результат кладёт в файл, который вы подключаете вручную. Это удобно для лендингов, писем-шаблонов, статических генераторов и любых проектов без Node-сборки на бою.

Решение задания 3

npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.min.css --minify

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