Pixi'VN - Tailwind CSS

如何在 Pixi’VN 项目中添加 Tailwind CSS，推荐插件，以及用于对话和界面样式设置的示例。

模板

所有模板中均已安装并配置好 Tailwind CSS。

ink

你可以在 ink 语法中使用此方法。更多内容请参阅此处。

目前有多种 Tailwind CSS 插件可供使用。以下是其中一些：

tailwind-animations：一个社区 Tailwind CSS 插件，提供一系列专注于微交互的流畅动画工具类（例如 animate-fade-in-down、animate-jump-in、animate-wiggle）。
tw-animate-css：一个 Tailwind CSS v4 插件，将流行的 Animate.css 库以工具类的形式移植过来。提供现成的进入、退出和吸引注意力的动画（例如 animate-fade-in、animate-bounce-in、animate-shake），可直接应用于 HTML 元素。
@tailwindcss/typography：官方 Tailwind CSS Typography 插件，提供一组用于添加精美排版效果的类。

建议在 Pixi’VN 项目中使用 Tailwind CSS 为对话文本添加样式或动画效果。

content/labels/start.label.ts

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;

Tailwind CSS

什么是 Tailwind CSS？