Pixi'VN - Tailwind CSS

Come aggiungere Tailwind CSS a un progetto Pixi'VN, plugin consigliati ed esempi di utilizzo per definire lo stile dei dialoghi e dell'interfaccia utente.

Modifica su GitHub Traduci su Crowdin Chiedi a ChatGPT Patreon

Cos'è Tailwind CSS? Tailwind CSS è un framework CSS incentrato sull'utilità per la creazione rapida di design personalizzati. Si tratta di un framework di basso livello che fornisce un set di classi di utilità che possono essere utilizzate per creare progetti personalizzati senza dover uscire dall'HTML. Puoi trovare maggiori informazioni su come installarlo qui.

Templates

In tutti i modelli, il CSS Tailwind è già installato e configurato.

ink

È possibile utilizzare questo metodo con la sintassi ink. Scopri di più qui.

Per saperne di più, visita il sito web Tailwind CSS.

Sono disponibili vari plugin Tailwind CSS. Ecco un elenco di alcuni di essi:

Tailwind CSS Motion: Aggiunge animazioni al tuo progetto Tailwind CSS.
Tailwind CSS Typography: The official Tailwind CSS Typography plugin provides a set of classes you can use to add beautiful typographic.

Si consiglia di utilizzare Tailwind CSS nel progetto Pixi'VN per aggiungere stili o animazioni al testo del dialogo. Ecco un esempio che utilizza il plugin tailwindcss-motion:

labels/startLabel.ts

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

const startLabel = newLabel("start", [
    async () => {
        narration.dialogue = `<span className="inline-block motion-translate-y-loop-25">Hello</span>, welcome to the game!`;
    },
]);
export default startLabel;