Фильтры
Утилиты для применения фильтров к элементу.
Class | Styles |
---|---|
filter-none | filter: none; |
filter-(<custom-property>) | filter: var(<custom-property>); |
filter-[<value>] | filter: <value>; |
Используйте утилиты типа blur-xs
и grayscale
для применения фильтров к элементу:
blur-xs
grayscale
combined
<img class="blur-xs" src="/img/mountains.jpg" /><img class="grayscale" src="/img/mountains.jpg" /><img class="blur-xs grayscale" src="/img/mountains.jpg" />
Вы можете комбинировать следующие утилиты фильтров: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate и sepia.
Используйте утилиту filter-none
для удаления всех фильтров, примененных к элементу:
<img class="blur-md brightness-150 invert md:filter-none" src="/img/mountains.jpg" />
Используйте синтаксис filter-[<value>]
, чтобы задать filter на основе полностью пользовательского значения:
<img class="filter-[url('filters.svg#filter-id')] ..." src="/img/mountains.jpg" />
Для переменных CSS вы также можете использовать синтаксис: filter-(<custom-property>)
<img class="filter-(--my-filter) ..." src="/img/mountains.jpg" />
Это просто сокращение, filter-[var(<custom-property>)]
которое автоматически добавляет функцию var()
.
Префикс a filter
утилиты с вариантом, например hover:*
, чтобы применить утилиту только в этом состоянии:
<img class="blur-sm hover:filter-none ..." src="/img/mountains.jpg" />
Подробнее об использовании вариантов читайте в документации по вариантам.
Префикс a filter
утилита с вариантом контрольной точки, например md:
, чтобы применить утилиту только при размерах экрана medium и выше:
<img class="blur-sm md:filter-none ..." src="/img/mountains.jpg" />
Подробнее об использовании вариантов читайте в документации по вариантам.