Tailwind CSS

Hay varios plugins de Tailwind CSS disponibles. Aquí tienes una lista de algunos de ellos:

• tailwind-animations: Un plugin de Tailwind CSS de la comunidad que proporciona una colección de utilidades de animación fluidas enfocadas en micro-interacciones (p. ej. animate-fade-in-down, animate-jump-in, animate-wiggle).
• tw-animate-css: Un plugin de Tailwind CSS v4 que porta la popular biblioteca Animate.css como clases de utilidad. Expone animaciones de entrada, salida y llamada de atención ya preparadas (p. ej. animate-fade-in, animate-bounce-in, animate-shake) que se pueden aplicar directamente a elementos HTML.
• @tailwindcss/typography: El plugin Typography oficial de Tailwind CSS proporciona un conjunto de clases para añadir una tipografía elegante.

Se recomienda usar Tailwind CSS en tu proyecto Pixi’VN para añadir estilos o animaciones al texto de tus diálogos.

import { narration, newLabel } from "@drincs/pixi-vn";

const startLabel = newLabel("start", [
    async () => {
        narration.dialogue = `The night was <span class="inline-block animate-pulse text-violet-400">still</span>.
        Elena pressed the crumpled letter against her chest, her <span class="inline-block animate-pulse text-pink-500">heart</span> pounding beneath her ribs.
        Outside, the <span class="inline-block text-sky-500">cold</span> wind <span class="inline-block animate-bounce text-sky-400">rustled</span> the curtains
        and carried all her <span class="inline-block text-slate-500 italic">secrets</span> into the <span class="inline-block animate-bounce text-indigo-500">dark</span>.`;
    },
]);
export default startLabel;