Эта статья призвана стать отправной точкой для создания новых веб-проектов с помощью 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.