Краткая справка

Класс
Свойства
bg-nonebackground-image: none;
bg-gradient-to-tbackground-image: linear-gradient(to top, var(--tw-gradient-stops));
bg-gradient-to-trbackground-image: linear-gradient(to top right, var(--tw-gradient-stops));
bg-gradient-to-rbackground-image: linear-gradient(to right, var(--tw-gradient-stops));
bg-gradient-to-brbackground-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
bg-gradient-to-bbackground-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bg-gradient-to-blbackground-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
bg-gradient-to-lbackground-image: linear-gradient(to left, var(--tw-gradient-stops));
bg-gradient-to-tlbackground-image: linear-gradient(to top left, var(--tw-gradient-stops));

Основы использования

Линейные градиенты

Чтобы придать элементу фон с линейным градиентом, используйте одну из утилит bg-gradient-{direction} в сочетании с утилитами остановки градиентного цвета.

<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-gradient-to-r from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500"></div>

Применяя условно

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:bg-gradient-to-r to only apply the bg-gradient-to-r utility on hover.

<div class="bg-gradient-to-l hover:bg-gradient-to-r">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:bg-gradient-to-r to apply the bg-gradient-to-r utility at only medium screen sizes and above.

<div class="bg-gradient-to-l md:bg-gradient-to-r">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.


Использование пользовательских значений

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

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

Вы можете добавить свои собственные фоновые изображения, отредактировав раздел theme.backgroundImage вашего файла tailwind.config.js:

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'hero-pattern': "url('/img/hero-pattern.svg')",
        'footer-texture': "url('/img/footer-texture.png')",
      }
    }
  }
}

Это не обязательно должны быть градиенты - это могут быть любые фоновые изображения, которые вам нужны.

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

Произвольные значения

If you need to use a one-off background-image value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.