Pixi'VN - Tailwind CSS

Pixi’VN プロジェクトへの Tailwind CSS の追加方法、推奨プラグイン、および対話や UI のスタイリング例。

テンプレート

すべてのテンプレートには Tailwind CSS がすでにインストールおよび設定されています。

ink

このメソッドは ink 構文で使用できます。詳細はこちらをご覧ください。

利用可能な Tailwind CSS プラグインは様々あります。以下はその一部です：

tailwind-animations：マイクロインタラクションに特化したスムーズなアニメーションユーティリティのコレクションを提供するコミュニティ製 Tailwind CSS プラグインです（例：animate-fade-in-down、animate-jump-in、animate-wiggle）。
- tw-animate-css：人気の Animate.css ライブラリをユーティリティクラスとして移植した Tailwind CSS v4 プラグインです。 HTML 要素に直接適用できる入場・退場・注目を集めるアニメーション（例：animate-fade-in、animate-bounce-in、animate-shake）を提供します。
- @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 とは？