Создайте веб-сайт с помощью React и Tailwind CSS

Представляем шаблоны проектирования React Программирование и разработка

В этом руководстве показано, как создать веб-сайт продукта с помощью React и Tailwind CSS. Мы расскажем, как настроить React с Tailwind CSS, используя Create React App Configuration Override (CRACO) ; Служебные классы и варианты CSS Tailwind и способы их использования; как легко сделать сайт совместимым с темным режимом; какие группы есть; и как включить варианты.

Prerequisites

Прежде чем мы начнем, вам необходимо установить Node.js и npm. Если у вас установлен Node.js, то у вас будет установлен npm.

Чтобы проверить, установлен ли Node, выполните в командной строке следующее:

node -v

Вы должны увидеть версию. Сделайте то же самое для npm:

npm -v

Следует отметить, что для Tailwind CSS требуется Node.js версии 12.13.0 или выше.

Если вы получите сообщение об ошибке, вам необходимо установить Node. Вы можете следовать инструкциям по установке на веб-сайте Node или следовать нашей статье » Установка нескольких версий Node.js с помощью nvm «.

Настройка React и Tailwind CSS

Сначала создайте проект React с create-react-app:

npx create-react-app react-shop

Затем перейдите в каталог созданного проекта:

cd react-shop

Далее мы установим зависимости, необходимые для Tailwind CSS:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Мы устанавливаем Tailwind CSS вместе со сборкой совместимости с PostCSS 7, поскольку приложение Create React (или CRA) не поддерживает PostCSS 8 на момент написания этой статьи. Мы также устанавливаем autoprefixer, поскольку это требуется для Tailwind CSS после версии 2.0.

Настройка CRACO

Обычно, чтобы настроить ЗПР вам нужно запустить react-scripts ejectили npm run ejectс помощью скриптов по умолчанию ЗПР. Однако это очень неудобно, так как при этом все конфигурации, которые скрыты в CRA (например, конфигурации webpack, конфигурации Babel, конфигурации PostCSS и многое другое), будут вытеснены в ваш проект, и его редактирование может стать проблемой или вызвать проблемы, которые CRA больше не сможет поддерживать.

Именно здесь на помощь приходит переопределение конфигурации приложения Create React (или CRACO). CRACO — это библиотека, которая добавляет простой уровень конфигурации в CRA. Вместо того, чтобы извлекать все конфигурации внутри CRA в ваш проект — например, просто чтобы добавить некоторую конфигурацию в Webpack — все новые конфигурации или изменения исходной конфигурации будут помещены в новый файл craco.config.js. CRACO позволяет вам настроить CRA, чтобы получить от него максимум без лишних хлопот.

Здесь нам понадобится CRACO, чтобы переопределить конфигурации PostCSS и добавить tailwindcssплагин. Итак, сначала установим его:

npm install @craco/craco

При использовании CRA скрипты package.jsonвыглядят так:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Поскольку мы используем CRACO, чтобы делать то, что мы не можем делать с CRA по умолчанию, нам нужно изменить сценарии, чтобы использовать CRACO для сборки проекта или запуска его в разработке:

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

Мы заменили react-scriptsс cracoв start, buildи testсценариев. Мы не внесли никаких изменений в ejectсценарий.

Затем создайте файл конфигурации CRACO craco.config.jsв корне проекта:

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Этот файл конфигурации добавляет tailwindcssи autoprefixerплагинов postcss.

Теперь сгенерируем файл конфигурации для Tailwind CSS:

npx tailwindcss init

Примечание: если вы используете Node.js v14, сообщалось о проблеме, связанной с ошибкой, возникающей при выполнении этой команды: «Не удается найти модуль ’autoprefixer’». Обновление до Node.js v15 должно работать, но если вы не можете этого сделать, воспользуйтесь одним из обходных путей здесь.

Это создаст файл tailwind.config.jsв корне проекта. Он будет иметь следующий контент:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Вот что означает каждый из ключей конфигурации:

  1. purge: это используется для указания файлов, которые Tailwind CSS должен сканировать и видеть, какие классы Tailwind CSS используются, чтобы он мог удалить все неиспользуемые стили и классы в производстве.
  2. darkMode: это определяет поведение темного режима в вашем проекте. Значение может быть media- означает, что стиль темного режима будет применяться на основе медиа-запросатемного режима, который зависит от режима по умолчанию для ОС пользователя. Это также может быть class, что означает, что стиль темного режима будет применяться, когда родительский элемент в документе HTML имеет darkкласс.
  3. theme: это можно использовать для изменения цветовой палитры темы, шрифтов, точек останова и т. д. Мы увидим, как внести изменения в тему позже в этом руководстве.
  4. variants: это позволяет вам применять дополнительные варианты к основным плагинам Tailwind CSS. Позже мы увидим, как это работает.
  5. plugins: раздел для добавления плагинов, которые могут добавлять дополнительные служебные классы, пользовательские варианты, базовые стили или многое другое.

А пока мы сделаем два изменения. Сначала изменим purgeключ:

purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],

Это говорит Tailwind CSS, чтобы просмотреть все js, jsx, tsи tsxфайлы в srcкаталоге, и public/index.htmlфайл, чтобы выяснить, какие классы будут использоваться с Tailwind CSS и удалить все неиспользуемые классы.

Второе изменение будет для темного режима:

darkMode: "media", // or false or 'class'

Для простоты в этом руководстве мы сохраним темный режим только в зависимости от предпочтений ОС пользователя.

Последний шаг в настройке нашего проекта React с Tailwind CSS — это включение некоторых стилей Tailwind CSS в src/index.css. Замените содержимое этого файла следующим:

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

@tailwind Директива в основном импортирует стили в index.css. И по умолчанию CRA импортирует src/index.cssв src/index.js:

import './index.css';

Это означает, что стили Tailwind CSS будут применены в нашем проекте React, и мы готовы приступить к созданию красивого веб-сайта!

Понимание утилит и вариантов Tailwind CSS

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

Например, чтобы стилизовать

элемент с рамкой, изменить размер шрифта, изменить цвет фона и текста, вам нужно будет написать что-то вроде этого с помощью CSS:

div {
  border: 1px solid #f00;
  font-size: 15px;
  background-color: #ff007f;
  color: #fff;
}

Используя Tailwind CSS, вы можете сделать это, просто используя служебные классы:

<div class="border border-red-100 text-lg bg-red-400 text-white">
</div>

Вот что означает каждый класс в этом примере:

  1. border: устанавливает ширину границы в 1 пиксель
  2. border-red-100: устанавливает цвет границы на оттенок красного (в зависимости от темы)
  3. text-lg: дает размер шрифта 125remи высоту строки1.75rem
  4. bg-red-400: устанавливает цвет фона на оттенок красного (в зависимости от темы)
  5. text-white: устанавливает белый цвет текста

Есть много других классов, которые вы можете использовать, а также с множеством разных оттенков цветов, что упрощает создание тем. Используя служебные классы, вам редко нужно вообще писать какой-либо CSS.

Хорошо, а как насчет медиа-запросов? А как насчет псевдо-классов? А как насчет темного режима? Можно ли это сделать без написания CSS самостоятельно?

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

Итак, ранее вы могли сделать это, чтобы изменить ширину элемента в зависимости от размера устройства:

div {
  width: 50%;
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
  div {
    width: 80%;
  }
}

@media screen and (max-width: 767px){
  div {
    width: 100%
  }
}

С Tailwind CSS это можно сделать так:

<div class="w-full md:w-3/4 lg:w-1/2">
</div>

Это применяет w-1/2класс (что означает width: 50%), когда min-width: 1025pxприменяется к текущей ширине экрана, применяет w-3/4класс (что означает width: 80%), когда min-width: 768pxприменяется к текущей ширине экрана, и применяет w-fullкласс (что означает width: 100%;), когда другие варианты больше не применяются.

Это определенно упрощает и ускоряет утомительную работу над каждым проектом. Сначала это может показаться запутанным, но когда вы начнете больше заниматься этим, вы поймете, что использование служебных классов и вариантов становится второй натурой.

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

Реализация наших компонентов

Вернуться на наш сайт. Мы создаем простой веб-сайт, на котором товары будут отображаться с аккуратным дизайном. Для простоты мы будем использовать поддельные данные из Fake Store API. Вместо того, чтобы фактически выполнять запросы к API, мы возьмем образец ответа JSON и поместим его в файл JSON в нашем проекте. Опять же, это просто для простоты урока.

Перейдите в конечную точку продуктов и скопируйте ответ. Затем создайте файл src/data/products.jsonи вставьте в него ответ. Это должен быть массив объектов, подобных этому:

{
  "id": 1,
  "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
  "price": 109.95,
  "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
  "category": "men's clothing",
  "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
}

Начнем с реализации Productкомпонента. Этот компонент будет карточным компонентом, который показывает информацию о продукте. Создайте src/components/Product.jsсо следующим содержанием:

function Product ({product: {title, price, description, category, image}}) {
  return (
    <div>
      <div style={{backgroundImage: `url(${image})`}}></div>
      <div>
        <h1>{title.substr(, 50)}</h1>
        <h3>{category}</h3>
        <p>{price}$</p>
        <div>{description.substr(, 100)}</div>
      </div>
    </div>
  );
}

export default Product;

Как видите, Productкомпонент просто показывает подробную информацию о продукте. На данный момент мы не добавили никаких классов для стилизации.

Затем перейдите src/App.jsи измените содержимое на следующее:

import "./App.css";
import Product from "./components/Product";
import products from "./data/products.json";

function App() {
  return (
    <div>
      <div>
        {products.map((product) => (
          <Product product={product} key={product.id} />
        ))}
      </div>
    </div>
  );
}

export default App;

Здесь мы импортируем products.jsonфайл как products. Затем мы перебираем productsи отображаем каждый продукт, используя Productсозданный ранее компонент. Опять же, обратите внимание, что мы не добавили никаких классов для стилизации.

Теперь запустим сервер. Выполните следующую команду:

npm start

Вы увидите, что там просто набор текста, но никакого стиля.

Добавление цвета фона

Приступим к добавлению стиля. Сначала мы изменим цвет фона страницы. Для этого мы будем использовать классы цвета фона Tailwind. Классы цвета фона находятся в формате bg-{color}-{numericScale}, где не numericScaleявляется обязательным.

Цвета по умолчанию может быть white, black, gray, red, blue, green, yellow, orange, indigo, purpleи pink. Числовая шкала определяет оттенок цвета, где 50самый светлый оттенок и 900самый темный. Например, если вы хотите, чтобы цвет фона был светло-красным, вы можете использовать bg-red-200.

Читайте также:  PHP или JavaScript: подробное сравнение двух языков сценариев

На нашем веб-сайте мы установим светло-серый цвет фона, поэтому мы добавим класс bg-gray-200к самому внешнему

элементу в src/App.js:

return (
  <div className="bg-gray-200">
    <div>
      {products.map((product) => (
        <Product product={product} key={product.id} />
      ))}
    </div>
  </div>
);

Если вы проверите веб-сайт сейчас (если у вас еще не запущен сервер, обязательно запустите его снова), вы увидите, что фон изменился на светлый оттенок серого.

Изменение ширины содержимого

Следующее, что мы собираемся сделать, это изменить ширину содержимого на 50% от фактической ширины экрана, когда ширина экрана не меньше 768px, но оставьте ее на полную ширину на небольших устройствах. Мы будем использовать классы ширины Tailwind, которые мы немного рассмотрели ранее. Классы ширины имеют формат w-{size}, где sizeможет быть диапазон от 0 до 96, который относится к значению в rem; соотношение, подобное 1/2или 3/5, или другие соотношения, которые относятся к процентному соотношению; или ключевое слово, например, autoдля автоматической ширины или fullдля 100% ширины.

Чтобы задать ширину, основываясь на размере экрана, мы используем варианты, как sm, md, lgи т.д. Эти варианты указать размер минимального экрана, что требуется для правила, которые должны применяться.

В нашем случае, поскольку мы хотим, чтобы ширина составляла 50% от родительской для экранов, имеющих ширину не менее 768px, мы будем использовать mdвариант с w-1/2:

return (
  <div className="bg-gray-200">
    <div className="md:w-1/2">
      {products.map((product) => (
        <Product product={product} key={product.id} />
      ))}
    </div>
  </div>
);

Ширина теперь будет изменена на половину ширины экрана. Однако будет гораздо лучше отцентрировать его по горизонтали. Для этого мы будем использовать служебные классы маржи Tailwind. Классы полей находятся в формате m{side}-{value}, где не sideявляется обязательным и могут быть либо специфичными для каждой стороны элемента, например, tдля верхней, bнижней, lлевой и rправой, либо определенных по горизонтали yили по вертикали x. valueможет быть в диапазоне от 0 до 96, может быть pxпросто 1px, или auto. Не только это, но вы также можете добавить отрицательный запас, добавив -его в начало класса. Например, -m-2.

Поскольку мы центрируем элемент по горизонтали, мы будем использовать mx-auto:

return (
  <div className="bg-gray-200">
    <div className="md:w-1/2 mx-auto">
      {products.map((product) => (
        <Product product={product} key={product.id} />
      ))}
    </div>
  </div>
);

И вы можете видеть, что он расположен по центру.

Стилизация компонента продукта

Теперь перейдем к Productкомпоненту. Мы также добавим цвет фона для карточки продукта. Сделаем его белым и будем использовать bg-white. Мы также сделаем его полной шириной, поэтому будем использовать w-full. Чтобы отделить карточки продуктов друг от друга, мы добавим нижнюю границу к элементам, используя mb-5:

return (
  <div className="bg-white w-full mb-5">
    <div style={{backgroundImage: `url(${image})`}}></div>
    <div>
      <h1>{title.substr(, 50)}</h1>
      <h3>{category}</h3>
      <p>{price}$</p>
      <div>{description.substr(, 100)}</div>
    </div>
  </div>
);

И вы можете увидеть изменение на сайте:

Как вы можете видеть в нашем Productкомпоненте, внутри самого внешнего элемента у нас есть два элемента, один из которых имеет фоновое изображение продукта, а другой — информацию. Мы хотим разместить их рядом друг с другом. Первое, что нам нужно сделать, это изменить отображение самого внешнего

на гибкое. Для этого мы будем использовать классы отображения Tailwind. В отличие от ранее упомянутых классов, классы отображения не имеют формата. Это просто название дисплея, который нам нужен. Итак, чтобы изменить свойство отображения элемента на flex, вы просто добавляете flexкласс:

return (
  <div className="flex bg-white w-full mb-5">
    <div style={{backgroundImage: `url(${image})`}}></div>
    <div>
      <h1>{title.substr(, 50)}</h1>
      <h3>{category}</h3>
      <p>{price}$</p>
      <div>{description.substr(, 100)}</div>
    </div>
  </div>
);

Затем мы изменим ширину элементов, используя классы ширины, как раньше:

return (
  <div className="flex bg-white w-full mb-5">
    <div style={{backgroundImage: `url(${image})`}} className="w-5/12"></div>
    <div className="w-7/12">
      <h1>{title.substr(, 50)}</h1>
      <h3>{category}</h3>
      <p>{price}$</p>
      <div>{description.substr(, 100)}</div>
    </div>
  </div>
);

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

Добавляем некоторый интервал

Еще многое предстоит исправить. Во-первых, давайте добавим отступ для контейнера информации о продукте. Для этого мы будем использовать классы заполнения Tailwind. Классы заполнения в точности аналогичны классам полей, которые мы проверили ранее, за исключением того, что мы используем pвместо m.

Итак, добавим p-5в контейнер информации о продукте. Мы также добавим немного поля в контейнер описания, используя mt-4:

return (
  <div className="flex bg-white w-full mb-5">
    <div style={{backgroundImage: `url(${image})`}} className="w-5/12"></div>
    <div className="w-7/12 p-5">
      <h1>{title.substr(, 50)}</h1>
      <h3>{category}</h3>
      <p>{price}$</p>
      <div className="mt-4">{description.substr(, 100)}</div>
    </div>
  </div>
);

Мы также добавим верхнее и нижнее поля ко всему контейнеру, src/App.jsчтобы первый и последний продукты не располагались прямо у края страницы с обеих сторон. Для этого мы добавим класс py-4:

return (
  <div className="bg-gray-200 py-4">
    <div className="md:w-1/2 mx-auto">
      {products.map((product) => (
        <Product product={product} key={product.id} />
      ))}
    </div>
  </div>
);

Мы увидим, что теперь сайт начинает выглядеть лучше.

Улучшение типографики компонента

Давайте теперь немного поработаем над типографикой. Вы можете видеть, что информация о продукте выглядит одинаково. Мы не можем отличить название от категории от описания и так далее. Во-первых, давайте изменим цвет части текста. Для этого мы будем использовать классы цвета текста Tailwind. Формат этих классов аналогичен классам цвета фона, но заменяется bна text. Например, чтобы сделать цвет текста зеленым, вы добавляете класс text-green-100.

Итак, давайте изменим цвет текста категории, чтобы text-gray-400он был немного блеклым по сравнению с другим текстом, и давайте изменим цвет текста цены на, text-red-500чтобы выделить его. Мы также добавим к цене верхнюю маржу, чтобы она выделялась больше всего:

return (
  <div className="flex bg-white w-full mb-5">
    <div style={{backgroundImage: `url(${image})`}} className="w-5/12"></div>
    <div className="w-7/12 p-5">
      <h1>{title.substr(, 50)}</h1>
      <h3 className="text-gray-400">{category}</h3>
      <p className="text-red-400 mt-4">{price}$</p>
      <div className="mt-4">{description.substr(, 100)}</div>
    </div>
  </div>
);

Если вы сейчас зайдете на сайт, то увидите, что текст выглядит немного яснее с точки зрения различения разных частей:

Далее изменим размер шрифта. Для этого мы будем использовать классы размера шрифта Tailwind. Формат для этих классов text-{size}, где sizeнаходится в диапазоне от smдо 9xl.

Мы увеличим размер шрифта цены, добавив класс text-4xlдля экранов с шириной, по крайней мере, 768pxс использованием mdварианта, и text-xlдля меньших экранов, и мы увеличим заголовок, добавив класс text-2xlдля экранов с шириной по крайней 768pxмере, также:

return (
  <div className="flex bg-white w-full mb-5">
    <div style={{backgroundImage: `url(${image})`}} className="w-5/12"></div>
    <div className="w-7/12 p-5">
      <h1 className="md:text-2xl">{title.substr(, 50)}</h1>
      <h3 className="text-gray-400">{category}</h3>
      <p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$</p>
      <div className="mt-4">{description.substr(, 100)}</div>
    </div>
  </div>
);

Текст теперь выглядит намного лучше.

Размещение изображения продукта

Затем давайте исправим изображение, чтобы оно отображалось полностью, и правильно расположим фоновое изображение.

Сначала мы изменим размер фонового изображения. Для этого мы будем использовать классы размера фона Tailwind. Формат этих классов bg-{size}, где sizeможет быть auto, containили cover. В нашем случае это будет bg-containдля того, чтобы увидеть все изображение целиком.

Во-вторых, мы изменим атрибут повторения фона, чтобы изображение не повторялось несколько раз. Для этого мы будем использовать классы повтора фона Tailwind. Формат для этих классов: bg-{repeatValue}где repeatValue- значение, которое вы дали бы background-repeatсвойству, или bg-repeat-roundдля округленного значения и bg-repeat-spaceдля значения пробела. В нашем случае мы будем использовать bg-no-repeat.

В-третьих, мы изменим атрибут положения фона, чтобы изображение всегда было по центру. Для этого мы будем использовать классы положения фона Tailwind. Формат этих классов: bg-{position}где position- значение, которое вы дадите background-positionсвойству. Мы добавим класс bg-center:

return (
  <div className="flex bg-white w-full mb-5">
    <div style={{backgroundImage: `url(${image})`}} className="w-5/12 bg-contain bg-no-repeat bg-center"></div>
    <div className="w-7/12 p-5">
      <h1 className="md:text-2xl">{title.substr(, 50)}</h1>
      <h3 className="text-gray-400">{category}</h3>
      <p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$</p>
      <div className="mt-4">{description.substr(, 100)}</div>
    </div>
  </div>
);

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

Вы заметите, что некоторые изображения касаются края контейнера. Чтобы исправить это, мы добавим элемент оболочки к элементу фонового изображения и добавим к нему отступ:

return (
  <div className="flex bg-white w-full mb-5">
    <div className="w-5/12 p-2">
      <div style={{backgroundImage: `url(${image})`}} className="bg-contain bg-no-repeat bg-center w-full h-full"></div>
    </div>
    <div className="w-7/12 p-5">
      <h1 className="md:text-2xl">{title.substr(, 50)}</h1>
      <h3 className="text-gray-400">{category}</h3>
      <p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$</p>
      <div className="mt-4">{description.substr(, 100)}</div>
    </div>
  </div>
);

Обратите внимание, что мы переместили ширину, которую мы ранее дали фоновому изображению, в элемент-оболочку, и мы добавили w-fullи h-fullк элементу фонового изображения, чтобы убедиться, что он принимает 100%ширину и высоту своего родителя.

Добавление тени блока и закругленных углов

Наши продукты теперь выглядят намного лучше. Мы добавим два последних штриха к текущему стилю. Во-первых, мы добавим тени каждому продукту. Мы будем использовать классы теней коробки Tailwind. Формат для этих классов: shadow-{size}where sizeявляется необязательным и может варьироваться от smдо 2xl. Также можно noneудалить любую тень блока или innerсделать тень внутренней. Во-вторых, сделаем границу карточки товара немного скругленной. Мы будем использовать классы радиуса границы Tailwind. Формат для этих классов: rounded-{position}-{size}where sizeявляется необязательным и может варьироваться от smдо 3xlили может иметь значение none0 радиуса границы или fullсделать его полностью закругленным.positionтакже является необязательным и может быть определенным положением, например, tдля верхнего или lдля левого угла, или может быть определенным для определенного края, например tlдля верхнего левого угла.

Читайте также:  5 лучших IDE для программирования на С и С++

Добавим shadow-smв карточку товара, чтобы добавить к нему небольшую тень и rounded-lgсделать границу закругленной:

return (
  <div className="flex bg-white w-full mb-5 shadow-sm rounded-lg">
    <div className="w-5/12 p-2">
      <div style={{backgroundImage: `url(${image})`}} className="bg-contain bg-no-repeat bg-center w-full h-full"></div>
    </div>
    <div className="w-7/12 p-5">
      <h1 className="md:text-2xl">{title.substr(, 50)}</h1>
      <h3 className="text-gray-400">{category}</h3>
      <p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$</p>
      <div className="mt-4">{description.substr(, 100)}</div>
    </div>
  </div>
);

Наконец, наша страница со списком продуктов выглядит как на скриншоте ниже.

Настройка темы

До сих пор все стили, которые мы делали, были основаны на стилях Tailwind по умолчанию. Однако Tailwind также позволяет нам настраивать нашу тему. Мы можем изменить цвета, семейство шрифтов и многое другое. Все эти изменения сделаны в tailwind.config.js.

Попробуем немного изменить цвета. Есть разные способы изменить цвета темы.

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

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: "media", // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        turquoise: "#40e0d0"
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Обратите внимание, что внутри theme.extendмы добавили colorsобъект, а затем внутри него мы добавили ключ turquoiseс шестнадцатеричным кодом для бирюзового цвета. Теперь мы можем использовать этот цвет так же, как и цвета по умолчанию. Например, чтобы установить бирюзовый цвет фона, вы можете использовать bg-turquoise.

Другой способ настроить цвета темы — изменить цвета по умолчанию. Как упоминалось ранее, цвета по умолчанию в Tailwind являются white, black, gray, red, blue, green, yellow, orange, indigo, purpleи pink. Вы можете изменить фактическое значение для этих цветов.

Например, чтобы изменить yellowцвет на более горчично-желтый, сделайте следующее:

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: "media", // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        yellow: "#e1ad01"
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

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

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: "media", // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        yellow: {
          200: "#feca1d",
          400: "#e1ad01",
          700: "#b48a01"
        }
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Вы также можете использовать клавиши, как lightest, light, DEFAULT, dark, darkest:

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: "media", // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        yellow: {
          light: "#feca1d",
          DEFAULT: "#e1ad01",
          dark: "#b48a01"
        }
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Добавление цветовой палитры

Третий способ изменить цвет — использовать другие цветовые палитры в Tailwind CSS, что мы и сделаем.

Во-первых, require colorsfrom tailwindcss/colorsв начале tailwind.config.js:

const colors = require("tailwindcss/colors")

Затем мы изменим красный цвет на розовую палитру, а серый на сине-серый:

const colors = require("tailwindcss/colors")

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: "media", // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        gray: colors.blueGray,
        red: colors.rose
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Если вы сейчас посетите веб-сайт, вы увидите небольшое изменение используемых нами цветов.

Если вы хотите хорошо видеть разницу в цветах, вы можете попробовать изменить серый цвет на янтарный:

const colors = require("tailwindcss/colors")

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: "media", // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        gray: colors.amber,
        red: colors.rose
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Вы увидите, что фон стал желтоватым.

Вы также можете изменить семейство шрифтов и многое другое, tailwind.config.jsиспользуя те же классы, что и Tailwind CSS. Таким образом, вы можете легко настроить тему в соответствии с вашим дизайном.

Добавление темного режима

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

Вначале, когда мы настраивали наш веб-сайт, мы изменили darkключ tailwind.config.jsна media. Это означает, что темный режим будет применяться, когда браузер или ОС настроены на темный режим.

Если вы хотите проверить, как веб-сайт будет выглядеть в темном режиме, но у вас нет темного режима, вы можете эмулировать это в Chrome DevTools. Откройте DevTools, нажав F12, затем нажмите CTRL+ SHIFT+ P(или CMD+ SHIFT+ Pв macOS) и в появившемся раскрывающемся списке введите «Показать рендеринг» и выберите отображаемый вариант. Наконец, прокрутите вниз до «Emulate CSS Media feature prefers-color-scheme» и выберите prefers-color-scheme: dark. То же самое можно сделать для проверки светового режима, выбрав prefers-color-scheme: light.

Начнем с изменения цвета фона сайта в темном режиме, добавив класс dark:bg-gray-800в src/App.js:

return (
  <div className="bg-gray-200 py-4 dark:bg-gray-800">
    <div className="md:w-1/2 mx-auto">
      {products.map((product) => (
        <Product product={product} key={product.id} />
      ))}
    </div>
  </div>
);

Если вы проверите сейчас, и ваш браузер / ОС настроен на темный режим (или эмулирован), вы увидите, что цвет фона изменился на более темный оттенок серого.

Теперь внесем изменения в карточку продукта. Мы добавим класс dark:bg-gray-300к самому внешнему элементу:

return (
  <div className="flex bg-white w-full mb-5 shadow-sm rounded-lg dark:bg-gray-300">
    <div className="w-5/12 p-2">
      <div style={{backgroundImage: `url(${image})`}} className="bg-contain bg-no-repeat bg-center w-full h-full"></div>
    </div>
    <div className="w-7/12 p-5">
      <h1 className="md:text-2xl">{title.substr(, 50)}</h1>
      <h3 className="text-gray-400">{category}</h3>
      <p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$</p>
      <div className="mt-4">{description.substr(, 100)}</div>
    </div>
  </div>
);

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

Давайте сделаем это лучше, добавив белый фон к оболочке фона, когда она находится в темном режиме. Это можно сделать, добавив класс dark:bg-white. Кроме того, цвет текста категории теперь едва виден, поэтому мы изменим его на более темный, добавив класс dark:text-gray-700:

return (
  <div className="flex bg-white w-full mb-5 shadow-sm rounded-lg dark:bg-gray-300">
    <div className="w-5/12 p-2 dark:bg-white rounded-tl-lg rounded-bl-lg">
      <div style={{backgroundImage: `url(${image})`}} className="bg-contain bg-no-repeat bg-center w-full h-full"></div>
    </div>
    <div className="w-7/12 p-5">
      <h1 className="md:text-2xl">{title.substr(, 50)}</h1>
      <h3 className="text-gray-400 dark:text-gray-700">{category}</h3>
      <p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$</p>
      <div className="mt-4">{description.substr(, 100)}</div>
    </div>
  </div>
);

Окончательный вид нашего сайта показан ниже.

Группы и варианты включения для плагинов

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

Один из вариантов, которые не включены, — это групповое наведение. Группа — это несколько элементов, которые сгруппированы вместе, поэтому любое состояние (например, наведение курсора) может повлиять на всю группу. Группа объявляется путем добавления groupкласса в контейнер. Затем вы можете использовать этот group-hoverвариант с одним из служебных классов в элементе, который является дочерним по отношению к контейнеру. Служебный класс, который вы использовали group-hover, не будет применяться, если какой-либо элемент в группе (то есть любой элемент внутри элемента контейнера) не будет зависать.

Мы собираемся сделать каждую карточку продукта a group, а затем при наведении курсора увеличим изображение. Итак, мы добавим groupкласс к самому внешнему элементу в Productкомпоненте, а затем добавим к элементу, имеющему фоновое изображение, следующие классы:

  • transition-transform: один из переходныхклассов попутного ветра. Он применяет transitionсвойства transformтолько к изменениям.
  • duration-300: один из классов продолжительности переходаПопутного ветра. Применяет transition-durationсо значением 300ms.
  • group-hover:transform: как объяснено выше, group-hoverвариант гарантирует, что transformкласс применяется только при наведении курсора на элемент в группе. transformявляется одним из классов преобразованияЭто позволяет добавлять другие классы, связанные с преобразованием.
  • group-hover: scale-125: scale-125класс является одним из масштабныхклассов попутного ветра. Он устанавливает scaleдля X и Y значение 25, но transformсначала вам нужно добавить класс.

Используя вышеуказанные классы, изображение будет увеличиваться при наведении курсора на любой элемент в продукте. Мы также добавим класс overflow-hiddenк самому внешнему элементу в Productкомпоненте, чтобы гарантировать, что если изображение вырастет за пределы своего контейнера, оно не переполнится. Мы также будем использовать, hover:shadow-2xlчтобы увеличить тень карточки продукта transition-shadow duration-300, чтобы переход был плавным:

return (
  <div className="flex bg-white w-full mb-5 shadow-sm rounded-lg dark:bg-gray-300 group overflow-hidden hover:shadow-2xl transition-shadow duration-300">
    <div className="w-5/12 p-2 dark:bg-white rounded-tl-lg rounded-bl-lg">
      <div style={{backgroundImage: `url(${image})`}} className="bg-contain bg-no-repeat bg-center w-full h-full transition-transform duration-300 group-hover:transform group-hover:scale-125"></div>
    </div>
    <div className="w-7/12 p-5">
      <h1 className="md:text-2xl">{title.substr(, 50)}</h1>
      <h3 className="text-gray-400 dark:text-gray-700">{category}</h3>
      <p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$</p>
      <div className="mt-4">{description.substr(, 100)}</div>
    </div>
  </div>
);

Примечание: если вы имитируете темный режим (или используете темный режим), вы можете лучше увидеть эффект в светлом режиме, поэтому обязательно переключитесь в светлый режим.

Если вы сейчас попытаетесь навести курсор на продукт, вы увидите, что тень увеличивается, а изображение увеличивается.

Заключение

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

Оцените статью
bestprogrammer.ru
Добавить комментарий