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

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(0, 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(0, 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для верхнего левого угла.

Добавим 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(0, 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(0, 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(0, 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(0, 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(0, 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(0, 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(0, 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(0, 100)}</div>
    </div>
  </div>
);

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

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

Заключение

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