Эта статья призвана стать отправной точкой для создания новых веб-проектов с помощью Vite + React и Tailwind CSS. Всякий раз, когда вы чувствуете себя неуверенно, не пропустили ли вы что-то в своей настройке, это ваше руководство, к которому вы можете вернуться.

Хватит болтать — настройте свою рабочую среду

Зайдите в свою папку, где вы создаете свои проекты веб-разработки. Создать новую папку. Внутри этой папки создайте папку с именем client. Теперь у вас есть: dev/<projectName>/client

Откройте папку проекта в VS Code (или в вашем любимом редакторе) и войдите в папку клиента с помощью cd client (команда терминала).

Мы будем работать с React, Vite и Tailwind CSS.

Вайт + Реагировать

Начнем с Vite. Введите свой терминал:

npm init vite@latest

Вам будет предложено указать несколько вещей

(Вот некоторая ориентация относительно того, что вы должны и можете написать)

✔ Название проекта: … ./ (т.е. клиент)

✔ Название пакета: … <projectName>

✔ Выберите фреймворк: › реагировать

✔ Выберите вариант: › реагировать

Затем напишите npm install в своем терминале. Если все работает нормально, напишите npm run dev, чтобы запустить ваш сервер разработки (localhost).

Вы увидите пример приложения React:

Кроме того, мы можем использовать Tailwind CSS, который упрощает добавление CSS в компоненты React. Вот инструкция по установке: https://tailwindcss.com/docs/installation/using-postcss

Попутный ветер CSS

Шаг 1:

Чтобы выполнить шаг 1, вам нужно написать эти две команды в вашем терминале одну за другой:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Давайте проверим нашу структуру папок, сравните, пожалуйста, с вашей. :)

Шаг 2:

Если вам не хватает файла postcss.config.js, создайте его вручную и добавьте следующие строки:

Шаг 3.

Перейдите к файлу tailwind.config.js и замените код, который вы там видите, кодом из руководства по установке и добавьте к содержимому окончание .jsx, так как мы работаем с React.

Шаг 4:

Добавьте директивы @tailwind для каждого из слоев Tailwind в ваш основной файл CSS. Наш основной файл CSS называется index.css, пусть это вас не смущает. Удалите все там и скопируйте три директивы попутного ветра

Опять структура папок для вашей ориентации.

Ваш index.css должен выглядеть так:

Последний шаг:

Этот шаг должен помочь нам убедиться, что Vite и Tailwind CSS отлично работают вместе. Перейдите в свой файл App.jsx и напишите этот код:

А затем запустите npm run dev в папке вашего клиента с помощью вашего терминала; вы получите ссылку на localhost. Нажмите на ссылку и оцените результат.

Если на вашей странице в левом верхнем углу есть надпись Hello world, подчеркнутая и выделенная жирным шрифтом, все готово, и вы можете приступить к кодированию своего веб-сайта. Удачного кодирования! :)))

Заключение

Следуя и набрав это самостоятельно, вы сделали первый шаг к запоминанию основных настроек, необходимых для начала работы над вашими веб-проектами. Если вас попросят создать проект с помощью Vite и React с помощью Tailwind CSS, вы можете использовать это как контрольный список. Если вам что-то непонятно, напишите об этом в комментариях. Спасибо, что уделили время.

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.