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란?