Efectos y filtros.
v10 reduce efectos a señales funcionales. Las sombras decorativas están prohibidas.
Referencia
Tailwind genera estas utilidades durante el build. Style fija los tokens aceptados, los defaults y las restricciones del grupo.
| Propiedad o familia | Uso en v10 | Criterio |
|---|---|---|
| box-shadow / text-shadow | No permitido en Style | Usar líneas, capas y espacio |
| opacity | Disabled y transición | El contenido sigue legible; no oculta estado |
| mix-blend-mode / background-blend-mode | Visualización excepcional | No en controles o texto |
| mask-* | Iconos y gráficos | Fallback cuando la forma comunica |
| filter: blur / brightness / contrast | Medios o estado temporal | No alterar evidencia silenciosamente |
| drop-shadow | No permitido en componentes | SVG de marca sólo si el activo canónico lo incluye |
| grayscale / hue-rotate / invert / saturate / sepia | No para estados de UI | Usar tokens semánticos |
| backdrop-filter | Sólo overlay justificado | Fallback opaco y rendimiento probado |
Reglas de Style
- Sin box-shadow ni text-shadow.
- No usar blur para ocultar datos sensibles.
- Los efectos respetan forced colors y reduced transparency cuando exista.
- La UI permanece comprensible sin filtros.
Contrato de uso
- Usar utilidades para ajustes locales y prototipos acotados.
- Usar una clase semántica de Kit cuando el patrón se repite o tiene comportamiento.
- No construir clases dinámicamente; cada nombre debe aparecer completo en el código fuente.
- No usar valores arbitrarios para reemplazar un token que falta. Proponer primero el token.
- Verificar 320 px, 200% de zoom, tema oscuro y reducción de movimiento cuando aplique.