filter

例

基本的な例

要素にフィルターを適用するには、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, and sepia.

フィルターの削除

要素に適用されたすべてのフィルターを削除するには、filter-noneユーティリティを使用します

<img class="blur-md brightness-150 invert md:filter-none" src="/img/mountains.jpg" />

カスタム値の使用

Use the filter-[<value>] syntax to set thefilterbased on a completely custom value

<img class="filter-[url('filters.svg#filter-id')] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the filter-(<custom-property>) syntax

<img class="filter-(--my-filter) ..." src="/img/mountains.jpg" />

This is just a shorthand for filter-[var(<custom-property>)] that adds the var() function for you automatically.

ホバー時に適用

Prefixa filter utility with a variant like hover:* to only apply the utility in that state

<img class="blur-sm hover:filter-none ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

レスポンシブデザイン

Prefixa filter utility with a breakpoint variant like md: to only apply the utility atmedium screen sizes and above

<img class="blur-sm md:filter-none ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.