Documentación offline Tailwind CSS main
por @raupulus

filter: invert()

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
invert filter: invert(100%);
invert-<number> filter: invert(<number>%);
invert-(<custom-property>) filter: invert(var(<custom-property>));
invert-[<value>] filter: invert(<value>);

Examples#

Basic example#

Use utilities like invert and invert-20 to control the color inversion of an element:

{

invert-0

invert-20

invert

}

<!-- [!code classes:invert-0,invert-20,invert] -->
<img class="invert-0" src="/img/mountains.jpg" />
<img class="invert-20" src="/img/mountains.jpg" />
<img class="invert" src="/img/mountains.jpg" />

Using a custom value#

Responsive design#