Чтобы установить Tailwind CSS с помощью инструмента Vite, вы можете воспользоваться следующими методами:

Метод 1: использование npm (менеджера пакетов узла)

1. Создайте новый каталог проекта и перейдите в него.
2. Инициализируйте новый проект npm, выполнив в терминале следующую команду:

   npm init -y

3. Установите Vite и Tailwind CSS, выполнив следующую команду:

   npm install vite tailwindcss

4. Создайте tailwind.config.js

   module.exports = {
   purge: [],
   darkMode: false,
   theme: {
   extend: {},
   },
   variants: {},
   plugins: [],
   }

5. Создайте новый файл с именем main.cssв выбранном вами каталоге (например, src/styles) и добавьте в него следующую строку:

   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';

6. Создайте файл index.htmlв корне каталога вашего проекта и свяжите с ним файл main.css.
7. Откройте файл index.htmlи добавьте следующую строку в раздел :

   <meta name="viewport" content="width=device-width, initial-scale=1" />

8. Откройте файл package.jsonи обновите раздел «скрипты», включив в него следующую строку:

   "scripts": {
   "dev": "vite"
   }

9. Выполните следующую команду в своем терминале, чтобы запустить сервер разработки:

   npm run dev

   Вы успешно установили Tailwind CSS с Vite с помощью npm.

Метод 2: использование Yarn
Если вы предпочитаете использовать Yarn в качестве менеджера пакетов, вы можете выполнить аналогичный процесс:

1. Создайте новый каталог проекта и перейдите в него.
2. Инициализируйте новый проект Yarn, выполнив следующую команду в терминале:

   yarn init -y

3. Установите Vite и Tailwind CSS, выполнив следующую команду:

   yarn add vite tailwindcss

4. Для завершения настройки выполните шаги 4–9 из метода 1.