Pixi’VNTailwind CSS
How to add Tailwind CSS to a Pixi’VN project, recommended plugins, and examples of using to style dialogue and UI.
Templates
In all templates, the Tailwind CSS is already installed and configured.
ink
You can use this method with the ink syntax. See more here.
There are various Tailwind CSS plugins available. Here is a list of some of them:
- tailwind-animations: A community Tailwind CSS plugin that provides a collection of smooth animation utilities focused on micro-interactions (e.g.
animate-fade-in-down,animate-jump-in,animate-wiggle). - tw-animate-css: A Tailwind CSS v4 plugin that ports the popular Animate.css library as utility classes. It exposes ready-made entrance, exit, and attention-seeking animations (e.g.
animate-fade-in,animate-bounce-in,animate-shake) that can be applied directly to HTML elements. - @tailwindcss/typography: The official Tailwind CSS Typography plugin provides a set of classes you can use to add beautiful typographic.
It is recommended to use Tailwind CSS in your Pixi’VN project to add styling or animations to your dialogue text.
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;