Установка с Vite

Vite — инструмент сборки фронтенда: он запускает сервер разработки и собирает файлы для публикации. У Tailwind есть официальный плагин для Vite — это самый простой способ подключить его к проекту, в том числе на React, Vue или Svelte.

Нужен Node.js

Vite и Tailwind устанавливаются через npm, поэтому понадобится Node.js версии 20 или новее. Проверьте в терминале:

node -v
npm -v

Создание проекта

Создайте проект shop на шаблоне vanilla — обычный HTML и JavaScript без фреймворков:

npm create vite@latest shop -- --template vanilla
cd shop
npm install

Установка Tailwind

Установите сам Tailwind и плагин для Vite:

npm install tailwindcss @tailwindcss/vite

Создайте в корне проекта файл vite.config.js и подключите плагин:

// vite.config.js
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [tailwindcss()],
});

Подключение в CSS

Замените всё содержимое src/style.css одной строкой:

@import "tailwindcss";

Эта строка подключает Preflight, тему и все утилиты. Файл tailwind.config.js в Tailwind 4 не нужен: настройки пишут прямо в CSS.

Файл src/main.js уже импортирует стили. Оставьте в нём только эту строку:

// src/main.js
import './style.css';

Разметка

Откройте index.html в корне проекта и замените содержимое <body>:

<body>
  <h1 class="p-8 text-3xl font-bold text-indigo-600">Магазин</h1>
  <script type="module" src="/src/main.js"></script>
</body>

Запустите сервер разработки:

npm run dev

Откройте http://localhost:5173 — заголовок крупный и синий. Поменяйте класс в index.html и сохраните: страница обновится сама.

Отличия от Tailwind 3

В третьей версии установка была другой: нужны были PostCSS, файл tailwind.config.js со списком файлов в content и три директивы @tailwind base, @tailwind components, @tailwind utilities. В старых статьях вы встретите именно их. В четвёртой версии их заменяет одна строка @import "tailwindcss";, а файлы с классами находятся автоматически.

Частая ошибка

Подключить плагин, но не импортировать CSS-файл в JavaScript:

// src/main.js
console.log('Привет');

Без import './style.css' Vite не знает о стилях, и страница остаётся без оформления. Если классы не работают, сначала проверьте, что файл с @import "tailwindcss"; импортирован в точке входа или подключён тегом <link>.

Спасибо, что читаете!