1. Getting Started
  2. Using Vite

Установка

Начните работу с Tailwind CSS

Tailwind CSS работает путем сканирования всех ваших HTML-файлов, JavaScript-компонентов и любых других шаблонов на наличие классов, генерации соответствующих стилей и последующей записи их в статический CSS-файл.

Он быстрый, гибкий и надежный — без необходимости использования runtime.

Установка Tailwind CSS как плагина Vite

Установка Tailwind CSS как плагина Vite — наиболее простой способ его интеграции с такими фреймворками, как Laravel, SvelteKit, React Router, Nuxt и SolidJS.

01

Создайте свой проект

Начните с создания нового проекта Vite, если у вас его еще нет. Наиболее распространенный подход — использовать Create Vite.

Terminal
npm create vite@latest my-projectcd my-project
02

Установите Tailwind CSS

Установите tailwindcss и @tailwindcss/vite через npm.

Terminal
npm install tailwindcss @tailwindcss/vite
03

Настройте плагин Vite

Добавьте плагин @tailwindcss/vite в конфигурацию Vite.

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

Импортируйте Tailwind CSS

Добавьте @import в свой CSS-файл, который импортирует Tailwind CSS.

CSS
@import "tailwindcss";
05

Начните процесс сборки

Запустите процесс сборки с помощью npm run dev или любой другой команды, настроенной в файле package.json.

Terminal
npm run dev
06

Начните использовать Tailwind в своем HTML

Убедитесь, что ваш скомпилированный CSS включен в <head> (ваша платформа может сделать это за вас), затем начните использовать классы утилиты Tailwind для стилизации вашего контента.

HTML
<!doctype html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="/src/style.css" rel="stylesheet"></head><body>  <h1 class="text-3xl font-bold underline">    Hello world!  </h1></body></html>
Вы застряли? Настройка Tailwind с Vite может немного отличаться в зависимости от разных инструментов сборки. Проверьте наши руководства по фреймворкам, чтобы узнать, есть ли у нас более конкретные инструкции для вашей конкретной настройки.
Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков