Use the
sepia
and
sepia-0
utilities to control whether an element should be rendered as sepia or in full color.
<
div
class
=
"
sepia-0
...
"
>
</
div
>
<
div
class
=
"
sepia
...
"
>
</
div
>
To remove all of the filters on an element at once, use the
filter-none
utility:
<
div
class
=
"
blur-md invert sepia
md:filter-none
"
>
</
div
>
This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use
hover
:
sepia-0
to only apply the
sepia-0
utility on
hover
.
<
div
class
=
"
sepia
hover:sepia-0
"
>
</
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:
sepia-0
to apply the
sepia-0
utility at only medium screen sizes and above.
<
div
class
=
"
sepia
md:sepia-0
"
>
</
div
>
To learn more, check out the documentation on
Responsive Design
,
Dark Mode
and
other media query modifiers
.
By default, Tailwind includes a handful of general purpose
sepia
utilities. You can customize these values by editing
theme.sepia
or
theme.extend.sepia
in your
tailwind.config.js
file.
module
.
exports
=
{
theme
:
{
extend
:
{
sepia
:
{
25
:
'.25'
,
75
:
'.75'
,
}
}
}
}
Learn more about customizing the default theme in the
theme customization
documentation.
If you need to use a one-off
sepia
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
=
"
sepia-[.25]
"
>
</
div
>
Learn more about arbitrary value support in the
arbitrary values
documentation.