меню

В этом руководстве мы расскажем, как настроить или добавить Tailwind CSS в приложение React JS. Мы также покажем Вам пример, как создать простой компонент с помощью фреймворка Tailwind CSS.

Tailwind CSS — это в первую очередь CSS-фреймворк, ориентированный на утилиты, который помогает в разработке очень крутых пользовательских интерфейсов. Он обеспечивает гибкость для фронтенд разработчиков, предлагая множество UI компонентов.

Tailwind CSS помогает не засорять HTML разметку, и любой может легко создавать более привлекательные макеты с помощью встроенных классов tailwind. Tailwind предлагает множество UI виджетов, которые увеличивают скорость разработки.

Это руководство по Tailwind CSS будет полезным примером CSS React Tailwind, для начинающих разработчиков React. Особенно тем, кто собирается увидеть божественное слияние React и Tailwind CSS.

Как добавить и использовать Tailwind CSS v3 в приложении React Js

  1. Шаг 1: Создание нового приложения React
  2. Шаг 2: Добавление модуля Tailwind CSS
  3. Шаг 3: Создание файла конфигурации Tailwind
  4. Шаг 4: Добавление директив Tailwind
  5. Шаг 5: Компиляция CSS Tailwind
  6. Шаг 6: Создание компонента с помощью Tailwind
  7. Шаг 7: Запуск React-приложения

Создание нового приложения React

Откройте командную строку, введите команду используя create-react-app tool:

  
npm install create-react-app --global
 

На этом этапе мы запустим команду и создадим новый проект.

 
npx create-react-app react-demo
 

Войдите в папку своего приложения:

 
cd react-demo
 

Добавление модуля Tailwind CSS

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

 
npm install -D tailwindcss
  

Создание файла конфигурации Tailwind

На этом шаге мы создадим файл tailwind.config.js, поэтому выполните следующую команду, чтобы сгенерировать файл конфигурации попутного ветра.

 
npx tailwindcss init
  

После выполнения команды, у Вас сгенерируется автоматически конфиг файл со следующим кодом.

  
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
  

Добавление директив Tailwind

Теперь Вам нужно перейти к файлу App.css, в этом файле мы разместим директивы @tailwind.

 
@tailwind base;
@tailwind components;
@tailwind utilities;
  

Компиляция CSS Tailwind

Кроме того, выполните следующую команду, чтобы запустить CLI Tailwind для сканирования файлов шаблонов React на наличие классов и сборки CSS.

  
npx tailwindcss -i ./src/App.css -o ./src/styles/output.css --watch
 

Создание компонента с помощью Tailwind

Чтобы проверить, корректно ли работает Tailwind CSS, мы собираемся использовать компонент Tailwind Card в React js.

Откройте файл App.js и добавьте в него указанный код.

  
import './App.css'
import React from 'react'

function App() {
  return (
    <div
      class={`h-screen w-full flex items-center justify-center bg-gray-300 flex-col`}
    >
      <label class="toggleDarkBtn">
        <input type="checkbox" />
        <span class="slideBtnTg round"></span>
      </label>
      <div class="max-w-sm rounded overflow-hidden bg-gray-100 p-5 rounded-lg mt-4 text-white dark:bg-gray-900">
        <img
          class="w-full"
          src="https://v1.tailwindcss.com/img/card-top.jpg"
          alt="Sunset in the mountains"
        />
        <div class="px-6 py-4">
          <div class="text-gray-800 dark:text-gray-200 font-bold text-xl mb-2">
            The Coldest Sunset
          </div>
          <p class="text-gray-800 dark:text-gray-200">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Voluptatibus quia, nulla! Maiores et perferendis eaque,
            exercitationem praesentium nihil.
          </p>
        </div>
        <div class="px-6 pt-4 pb-2">
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #photography
          </span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #travel
          </span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #winter
          </span>
        </div>
      </div>
    </div>
  )
}
export default App
 

Запуск React-приложения

На последнем шаге мы запустим наше приложение, используя команду:

  
npm start
 

Откройте URL для просмотра приложения в браузере:

  
http://localhost:3000
 

Руководство по внедрению Tailwind CSS в React JS

В этом подробном руководстве мы узнали, как добавить Tailwind CSS в приложении React JS. Мы надеемся, что это пошаговое руководство поможет Вам создавать более качественные приложения React за значительно меньшее время.


Возможно, вам будет интересно

Что нового в react-router v6?

Для тех, кто только начинает изучать React, сталкивается с проблемами организации роутов в приложении, т.к. в интернете много материалов по работе react-router более ранних версий. В данной статье будут описаны основная разница и новшества работы с react-router v6.

React useHooks. Часть 1 - полезные React хуки.

Хуки — это функции в React, которые позволяют Вам использовать состояние и другие функции React без написания классов. В этой статье мы будем рассматривать такие хуки, как useToggle, useFirestoreQuery, useMemoCompare, useAsync, useRequireAuth, useRouter, useAuth, useEventListener, useWhyDidYouUpdate, useDarkMode.

Руководство по внедрению Tailwind CSS в React JS

В этом руководстве мы расскажем, как настроить или добавить Tailwind CSS в приложение React JS. Мы также покажем Вам пример, как создать простой компонент с помощью фреймворка Tailwind CSS.

Рендеринг нескольких макетов в React с помощью react-router-dom v6.

Пошаговое руководство по рендерингу нескольких макетов в React с использованием новой версии react-router-dom 6.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту