В этом руководстве я покажу вам, как установить и использовать 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, чтобы проверить, все ли работает должным образом.)
Надеюсь, вам понравился этот урок.