Just-in-Time: Следующее поколение Tailwind CSS
Узнать больше →
Tailwind CSS home page
Tailwind CSS на GitHubTailwind CSS в Telegram

Остановки градиентного цвета

Утилиты для управления остановками цвета в фоновых градиентах.

Справочник классов по умолчанию

Класс
Предпросмотр 
from-transparent
from-current
from-black
from-white
from-gray-50
from-gray-100
from-gray-200
from-gray-300
from-gray-400
from-gray-500
from-gray-600
from-gray-700
from-gray-800
from-gray-900
from-red-50
from-red-100
from-red-200
from-red-300
from-red-400
from-red-500
from-red-600
from-red-700
from-red-800
from-red-900
from-yellow-50
from-yellow-100
from-yellow-200
from-yellow-300
from-yellow-400
from-yellow-500
from-yellow-600
from-yellow-700
from-yellow-800
from-yellow-900
from-green-50
from-green-100
from-green-200
from-green-300
from-green-400
from-green-500
from-green-600
from-green-700
from-green-800
from-green-900
from-blue-50
from-blue-100
from-blue-200
from-blue-300
from-blue-400
from-blue-500
from-blue-600
from-blue-700
from-blue-800
from-blue-900
from-indigo-50
from-indigo-100
from-indigo-200
from-indigo-300
from-indigo-400
from-indigo-500
from-indigo-600
from-indigo-700
from-indigo-800
from-indigo-900
from-purple-50
from-purple-100
from-purple-200
from-purple-300
from-purple-400
from-purple-500
from-purple-600
from-purple-700
from-purple-800
from-purple-900
from-pink-50
from-pink-100
from-pink-200
from-pink-300
from-pink-400
from-pink-500
from-pink-600
from-pink-700
from-pink-800
from-pink-900
via-transparent
via-current
via-black
via-white
via-gray-50
via-gray-100
via-gray-200
via-gray-300
via-gray-400
via-gray-500
via-gray-600
via-gray-700
via-gray-800
via-gray-900
via-red-50
via-red-100
via-red-200
via-red-300
via-red-400
via-red-500
via-red-600
via-red-700
via-red-800
via-red-900
via-yellow-50
via-yellow-100
via-yellow-200
via-yellow-300
via-yellow-400
via-yellow-500
via-yellow-600
via-yellow-700
via-yellow-800
via-yellow-900
via-green-50
via-green-100
via-green-200
via-green-300
via-green-400
via-green-500
via-green-600
via-green-700
via-green-800
via-green-900
via-blue-50
via-blue-100
via-blue-200
via-blue-300
via-blue-400
via-blue-500
via-blue-600
via-blue-700
via-blue-800
via-blue-900
via-indigo-50
via-indigo-100
via-indigo-200
via-indigo-300
via-indigo-400
via-indigo-500
via-indigo-600
via-indigo-700
via-indigo-800
via-indigo-900
via-purple-50
via-purple-100
via-purple-200
via-purple-300
via-purple-400
via-purple-500
via-purple-600
via-purple-700
via-purple-800
via-purple-900
via-pink-50
via-pink-100
via-pink-200
via-pink-300
via-pink-400
via-pink-500
via-pink-600
via-pink-700
via-pink-800
via-pink-900
to-transparent
to-current
to-black
to-white
to-gray-50
to-gray-100
to-gray-200
to-gray-300
to-gray-400
to-gray-500
to-gray-600
to-gray-700
to-gray-800
to-gray-900
to-red-50
to-red-100
to-red-200
to-red-300
to-red-400
to-red-500
to-red-600
to-red-700
to-red-800
to-red-900
to-yellow-50
to-yellow-100
to-yellow-200
to-yellow-300
to-yellow-400
to-yellow-500
to-yellow-600
to-yellow-700
to-yellow-800
to-yellow-900
to-green-50
to-green-100
to-green-200
to-green-300
to-green-400
to-green-500
to-green-600
to-green-700
to-green-800
to-green-900
to-blue-50
to-blue-100
to-blue-200
to-blue-300
to-blue-400
to-blue-500
to-blue-600
to-blue-700
to-blue-800
to-blue-900
to-indigo-50
to-indigo-100
to-indigo-200
to-indigo-300
to-indigo-400
to-indigo-500
to-indigo-600
to-indigo-700
to-indigo-800
to-indigo-900
to-purple-50
to-purple-100
to-purple-200
to-purple-300
to-purple-400
to-purple-500
to-purple-600
to-purple-700
to-purple-800
to-purple-900
to-pink-50
to-pink-100
to-pink-200
to-pink-300
to-pink-400
to-pink-500
to-pink-600
to-pink-700
to-pink-800
to-pink-900

Начальный цвет

Установите начальный цвет градиента с помощью утилит from-{color}.

<div class="bg-gradient-to-r from-red-500 ..."></div>

Конечный цвет

Установите конечный цвет градиента с помощью утилит to-{color}.

<div class="bg-gradient-to-r from-green-400 to-blue-500 ..."></div>

По умолчанию градиенты не становятся прозрачными. Чтобы перейти от прозрачного, измените направление градиента на противоположное и воспользуйтесь утилитой from-{color}.

Средний цвет

Добавьте средний цвет к градиенту с помощью утилит via-{color}.

<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 ..."></div>

Градиенты с from-{color} и via-{color} по умолчанию станут прозрачными, если нет to-{color}.

Затухание до прозрачного

По умолчанию градиенты переходят в прозрачные, не требуя явного добавления to-transparent. Tailwind интеллектуально вычисляет правильное “прозрачное” значение для использования на основе начального цвета, чтобы избежать ошибки в Safari, которая вызывает исчезновение просто до ключа transparent, чтобы исчезнуть через серый, что выглядит ужасно.

Не добавляйте явно `to-transparent`

<div class="bg-gradient-to-r from-blue-500 to-transparent">
  <!-- ... -->
</div>

Укажите только цвет от цвета и автоматически переходите к прозрачному

<div class="bg-gradient-to-r from-blue-500">
  <!-- ... -->
</div>

Адаптивность

Чтобы управлять ограничениями цвета градиента элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите остановки цвета градиента. Например, используйте md:from-green-500, чтобы применить утилиту from-green-500 только при средних размерах экрана и выше.

<div class="bg-gradient-to-r from-purple-400 md:from-yellow-500"></div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Чтобы управлять границами цвета градиента элемента при наведении, добавьте hover: к любой существующей утилите остановки цвета градиента. Например, используйте hover:bg-blue-500, чтобы применить утилиту bg-blue-500 при наведении.

<button type="button" class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 ...">
  Наведи меня
</button>

Утилиты при наведении курсора также можно комбинировать с адаптивными утилитами, добавляя префикс {screen}: перед префиксом focus:.

<button class="... md:from-blue-500 md:hover:from-blue-700 ...">Кнопка</button>

Фокус

Чтобы управлять ограничениями цвета градиента элемента в фокусе, добавьте focus: к любой существующей утилите остановки цвета градиента. Например, используйте focus:bg-blue-500, чтобы применить утилиту bg-blue-500 фокуса.

<button type="button" class="bg-gradient-to-r from-green-400 to-blue-500 focus:from-pink-500 focus:to-yellow-500">
  Сфокусируй меня
</button>

Утилиты Focus также можно комбинировать с адаптивными утилитами, добавляя префикс {screen}: перед префиксом focus:.

<button class="... md:from-blue-500 md:focus:from-blue-700 ...">Кнопка</button>

Кастомизация

Цвета фона

По умолчанию Tailwind делает всю цветовую палитру по умолчанию доступной в качестве остановки цвета градиента.

Вы можете настроить свою цветовую палитру, отредактировав переменную theme.colors в вашем файле tailwind.config.js, или настроить только конечные цвета цвета градиента с помощью theme.gradientColorStops раздела вашей конфигурации Tailwind.

  // tailwind.config.js
  module.exports = {
    theme: {
      gradientColorStops: theme => ({
-       ...theme('colors'),
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
      })
    }
  }

Варианты

По умолчанию, только responsive, темный режим (если включен), hover и focus варианты создаются для утилит gradient color stops.

Вы можете контролировать, какие варианты создаются для утилит gradient color stops для изменения свойства gradientColorStops в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты active и group-hover:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       gradientColorStops: ['active', 'group-hover'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения gradient color stops, Вы можете полностью отключить их, установив для gradientColorStops свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     gradientColorStops: false,
    }
  }
Фоновое изображениеРадиус границы
Edit this page on GitHub