Pixi’VNTailwind CSS
Wie man Tailwind CSS zu einem Pixi’VN-Projekt hinzufügt, empfohlene Plugins und Beispiele zur Gestaltung von Dialogen und Benutzeroberflächen.
Vorlagen
In allen Templates ist Tailwind CSS bereits installiert und konfiguriert.
ink
Sie können diese Methode mit der ink-Syntax verwenden. Mehr dazu hier.
Es gibt verschiedene Tailwind CSS-Plugins. Hier ist eine Auswahl:
- tailwind-animations: Ein Community-Tailwind-CSS-Plugin, das eine Sammlung von flüssigen Animations-Utilities für Micro-Interactions bereitstellt (z. B.
animate-fade-in-down,animate-jump-in,animate-wiggle). - tw-animate-css: Ein Tailwind CSS v4-Plugin, das die beliebte Animate.css-Bibliothek als Utility-Klassen portiert. Es bietet vorgefertigte Eingangs-, Ausgangs- und Aufmerksamkeitsanimationen (z. B.
animate-fade-in,animate-bounce-in,animate-shake), die direkt auf HTML-Elemente angewendet werden können. - @tailwindcss/typography: Das offizielle Tailwind CSS Typography-Plugin stellt eine Reihe von Klassen bereit, mit denen Sie schöne typografische Gestaltung hinzufügen können.
Es wird empfohlen, Tailwind CSS in Ihrem Pixi’VN-Projekt zu verwenden, um Ihren Dialogtext zu gestalten oder zu animieren.
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;