Tailwind CSS — это прежде всего служебная среда CSS, которая используется, чтобы сделать ваш веб-сайт более отзывчивым и красивым. Это хорошо известные современные CSS-фреймворки, которые помогают значительно ускорить процесс разработки и стилизации. Если вы новичок в Tailwind CSS, ознакомьтесь с официальной документацией Tailwind CSS и найдите хорошую отправную точку на домашней странице проекта TailwindCSS.
Настройка вашего проекта React с помощью Tailwind CSS очень проста и состоит всего из нескольких шагов. В этом руководстве вы пошагово изучите подход к установке Tailwind CSS в свой проект React и начнете использовать классы CSS Tailwind для стилизации.
Шаг 1: Создание вашего проекта React
Создание нового проекта React.js — это самый первый шаг. Самый простой способ создать новый проект — использовать скрипт create-react-app в командной строке.
npx create-react-app react-app-with-tailwind
Теперь перейдите в рабочий каталог.
cd react-app-with-tailwind
Если все пойдет хорошо, вы сможете увидеть свой проект реакции в веб-браузере при выполнении следующей команды.
npm run start
Шаг 2: Установите Tailwind CSS
Теперь установите tailwindcss и его одноранговые зависимости через npm, а затем запустите команду init, чтобы сгенерировать как tailwind.config.js, так и postcss. .config.js.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Tailwind создаст два файла. Вам нужно внести небольшие изменения, чтобы он хорошо работал для нашего проекта Reactjs.
- tailwind.config.js
- postcss.config.js
Шаг 4: Настройка файлов шаблонов
Вам нужно указать путь к нашим файлам проекта Reactjs, добавив следующий параметр конфигурации в tailwind.config.js. Обязательно добавьте пути ко всем файлам шаблонов в файл tailwind.config.js.
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Шаг 5: Добавьте директивы Tailwind в свой CSS
Теперь добавьте @tailwinddirectives для каждого слоя Tailwind в файл ./src/index.css.
@tailwind base;
@tailwind components;
@tailwind utilities;
Вот и все. Вы можете идти! Давайте воспользуемся классами CSS Tailwind в нашем основном компоненте React в App.js.
Шаг 6: Используйте Tailwind CSS в своем приложении React
Добавьте следующий код в App.js. Запустите веб-сервер разработки с помощью следующей команды. Теперь вы должны увидеть следующий результат в браузере.
npm run start
Вы можете найти код для этого руководства в этом репозитории GitHub.
Первоначально опубликовано на https://letmefail.com 3 июля 2022 г.