Введение

В этой статье мы узнаем, как настроить приложение React с помощью Vite с помощью TailwindCss.

React — это JavaScript-фреймворк для фронтенд-разработки, широко используемый фронтенд-разработчиками.

Tailwindcss — это фреймворк CSS, который в настоящее время находится в тренде и используется большинством разработчиков так же, как Bootstrap и другие фреймворки.


Предпосылки

Чтобы настроить этот проект, нам нужны Vscode и Nodejs, которые помогут нам со всеми необходимыми зависимостями.

Перейдите по ссылке ниже, чтобы помочь вам установить Vscode[(https://code.visualstudio.com/download#)]

перейдите по ссылке ниже, чтобы также установить Nodejs
[(https://nodejs.org/en/download/)]


Шаг 1

После того, как мы установили наши Nodejs и Vscode, следующим шагом будет создание папки на нашем рабочем столе или, предпочтительно, на нашем локальном диске, и назовите ее в соответствии с вашим проектом. В этой статье мы назовем нашу папку

Новый файл


Шаг 2

Теперь мы откроем папку, которую мы создали, открыв наш Vscode.

Описание изображения


Шаг 3

Мы собираемся установить Vite

используйте эту ссылку [(https://vitejs.dev/guide/)]

у вас должен получиться вот такой экран:

Описание изображения


Шаг 4

Мы собираемся скопировать команду выделения (npm create vite@latest) и открыть наш Vscode, затем щелкнуть терминал и открыть новый терминал.

Описание изображения

и вставить вот так

Описание изображения

используя нашу клавиатуру, мы собираемся ввести букву y, чтобы продолжить. И добавьте название нашего проекта по запросу.


Шаг 5

Мы нажимаем кнопку ввода, а затем используем клавишу со стрелкой для навигации по нужному фреймворку. для этого мы используем React. так же, как то, что мы видим ниже.

Описание изображения


Шаг 6

После навигации мы нажимаем React, другой вариант выбора будет отключен, чтобы выбрать JavaScript или TypeScipt, мы собираемся нажать на JavaScript.

Описание изображения


Шаг 7

После установки у нас есть такой экран для запуска следующих команд

Описание изображения


Шаг 8

мы используем команду cd, чтобы вернуться в наш корневой каталог

компакт-диск ./текст/
как называется наш проект

Описание изображения


Шаг 9

Теперь мы находимся в нашем корневом каталоге, теперь нужно запустить нашу следующую команду, которая

npm install
Войти в полноэкранный режим

Выйти из полноэкранного режима

После установки также запускаем эту команду

npm run dev
Войти в полноэкранный режим

Выйти из полноэкранного режима

Описание изображения

Теперь мы установили все необходимые зависимости, наш экран приветствия должен выглядеть так

Описание изображения


Шаг 10

Нам удалось установить React и Vite, последняя установка, которая нам нужна, — это фреймворк TailwindCss.

Для этого мы посещаем документацию tailwindcss, чтобы помочь нам установить его в наш проект.

вот ссылка [(https://tailwindcss.com/docs/installation/using-postcss)]

Описание изображения


Шаг 11

Мы собираемся скопировать первую команду, как показано выше, и вставить ее в наш терминал, нажмите кнопку ввода, чтобы начать установку.

Во-вторых, мы устанавливаем следующую показанную команду

npx tailwindcss init
Войти в полноэкранный режим

Выйти из полноэкранного режима


Шаг 11

Вернитесь к нашей документации попутного ветра, чтобы мы могли скопировать конфигурацию.

Описание изображения

Мы копируем три оператора конфигурации и вставляем их в наш index.css файл внутри нашего src папка

Описание изображения


Шаг 12

Мы нажимаем на tailwind.config.cjs файл и добавьте расширения, как показано ниже на экране

Описание изображения


Шаг 13

Ух ты !! мы настроили проект React и tailwindcss для стилизации, давайте сделаем образец текста на попутном ветре

Описание изображения

затем запустите команду

npm run dev
Войти в полноэкранный режим

Выйти из полноэкранного режима

У нас будет вывод этого ниже

Описание изображения


Вывод

В этой статье мы узнали, как установить React Project и Vite, а затем использовать Tailwind CSS в качестве нашей библиотеки фреймворка пользовательского интерфейса.

Вот ссылка на репозиторий GitHub [(https://github.com/Meenah-gurl/react_vite_tailwindcss.git)]