В этом руководстве я покажу вам, как установить и использовать Tailwind CSS с Viteи Ванильный HTML/JavaScript в Windows 11.

Прежде чем мы начнем, убедитесь, что в вашей системе установлен Node.js.

Шаг 1 (Создание проекта Vite)

а) Откройте вашу любимую командную строку

б) В командной строке перейдите в папку проекта и введите

npm create vite@latest <your-project-name>

Шаг 2

а) Создайте имя пакета или нажмите Enter, чтобы использовать имя пакета по умолчанию

б) Выберите свой фреймворк, в данном случае я буду использовать Vanilla (без фреймворка)

Шаг 3

Затем выберите JavaScript или TypeScript. Я выбираю JavaScript

Вуаля! Ваш проект Vite создан.

Шаг 4

В командной строке перейдите к только что созданному проекту, например:

cd '<path-to-your-project>'

Шаг 5 (Установите Tailwind CSS)

Теперь пришло время установить Tailwind CSS.

а) Введите следующую команду в командной строке

Эта команда установит все зависимости для вашего проекта, включая tailwindcss и его зависимости.

npm install -D tailwindcss postcss autoprefixer

б) Введите следующую команду в командной строке, чтобы создать файлы конфигурации CSS Tailwind — tailwind.config.cjs и postcss.config.cjs

npx tailwindcss init -p

ШАГ 6 (Открыть проект в VS Code)

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

Или откройте VS Code вручную и откройте только что созданный проект в VS Code.

Code .

ШАГ 7 (Выполнить проект)

Теперь пришло время запустить ваш проект с помощью Vite.

Введите следующий код в командной строке:

npm run dev

Скопируйте адрес http://localhost:5173/ в ваш браузер и, вуаля! у вас все настроено!

(Откройте index.html и добавьте несколько классов CSS Tailwind, чтобы проверить, все ли работает должным образом.)

Надеюсь, вам понравился этот урок.