Установка Tailwind CSS

Установи Tailwind CSS и официальный Vite-плагин для интеграции в проект. Tailwind v4 подключается через @tailwindcss/vite прямо в vite.config. tailwindcss — tailwindcss.ru

npm install tailwindcss @tailwindcss/vite

Конфигурация Vite

Настрой Vite для Tailwind CSS, React Compiler и алиаса @ на папку src. Алиасы в Vite задаются через resolve.alias, а Tailwind v4 подключается как Vite-плагин. tailwindcss — tailwindcss.com

vite.config.js

import { defineConfig } from 'vite'
import react, { reactCompilerPreset } from '@vitejs/plugin-react'

Что делает:

• tailwindcss() — подключает Tailwind CSS как Vite-плагин tailwindcss — tailwindcss.com
• alias '@' — позволяет импортировать из src через @/... futurestud — futurestud.io