Pixi’VNTailwind CSS
Come aggiungere Tailwind CSS a un progetto Pixi’VN, plugin consigliati ed esempi di utilizzo per stilizzare dialoghi e interfaccia.
Modelli
In tutti i template, Tailwind CSS è già installato e configurato.
ink
Puoi usare questo metodo con la sintassi ink. Scopri di più qui.
Sono disponibili vari plugin per Tailwind CSS. Eccone alcuni:
- tailwind-animations: Un plugin Tailwind CSS della community che fornisce una raccolta di utility di animazione fluide incentrate sulle micro-interazioni (es.
animate-fade-in-down,animate-jump-in,animate-wiggle). - tw-animate-css: Un plugin Tailwind CSS v4 che porta la popolare libreria Animate.css come classi di utilità. Espone animazioni di ingresso, uscita e richiamo dell'attenzione già pronte (es.
animate-fade-in,animate-bounce-in,animate-shake) applicabili direttamente agli elementi HTML. - @tailwindcss/typography: Il plugin Typography ufficiale di Tailwind CSS fornisce un insieme di classi per aggiungere una tipografia elegante.
Si consiglia di usare Tailwind CSS nel proprio progetto Pixi’VN per aggiungere stili o animazioni al testo dei dialoghi.
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;