Pixi’VNTailwind CSS
Comment ajouter Tailwind CSS à un projet Pixi’VN, plugins recommandés et exemples d'utilisation pour styliser les dialogues et l'interface.
Modèles
Dans tous les templates, Tailwind CSS est déjà installé et configuré.
ink
Vous pouvez utiliser cette méthode avec la syntaxe ink. En savoir plus ici.
Plusieurs plugins Tailwind CSS sont disponibles. En voici quelques-uns :
- tailwind-animations : Un plugin Tailwind CSS communautaire qui fournit une collection d'utilitaires d'animation fluides axés sur les micro-interactions (ex.
animate-fade-in-down,animate-jump-in,animate-wiggle). - tw-animate-css : Un plugin Tailwind CSS v4 qui porte la populaire bibliothèque Animate.css sous forme de classes utilitaires. Il expose des animations d'entrée, de sortie et d'attention prêtes à l'emploi (ex.
animate-fade-in,animate-bounce-in,animate-shake) applicables directement aux éléments HTML. - @tailwindcss/typography : Le plugin Typography officiel de Tailwind CSS fournit un ensemble de classes pour ajouter une belle typographie.
Il est recommandé d'utiliser Tailwind CSS dans votre projet Pixi’VN pour ajouter du style ou des animations à votre texte de dialogue.
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;