1.Настройка Проекта

Инициализация проекта:

Убедитесь, что у вас установлены все необходимые инструменты (Node.js, npm/yarn). Затем инициализируйте проект с использованием Next.js и Tailwind CSS.

Установка Node.js и npm

Скачать Node.js: Перейдите на

официальный сайт Node.js⁠

и скачайте LTS версию для вашей операционной системы.

Установка: Запустите скачанный файл и следуйте инструкциям установщика.

Проверка Установки: Откройте командную строку (терминал) и выполните команды:

node -v npm -v

Это должно вывести версии Node.js и npm, что подтвердит успешную установку.

Инициализация React.js Проекта

Создание Проекта: Откройте терминал и перейдите в папку, где вы хотите создать проект. Затем выполните:

npx create-react-app my-app

Здесь my-app — это имя вашего проекта.

Установка NextUI и Tailwind CSS

Переход в папку проекта:

cd my-app

Установка NextUI:

npm install @nextui-org/react

Установка Tailwind CSS:

npm install tailwindcss

Настройка Tailwind CSS: Создайте конфигурационный файл для Tailwind:

npx tailwindcss init

Это создаст файл tailwind.config.js в корневой папке проекта.

Интеграция Tailwind в проект: Откройте файл src/index.css и добавьте следующие строки:

@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';

Запуск проекта:

npm start

Это запустит ваш проект. Откройте браузер и перейдите на http://localhost:3000/ для просмотра вашего приложения.

Load content from whimsical.com?

Loading external content may reveal information to 3rd parties. Learn more

Allow

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.