Pixi’VNTailwind CSS
Как добавить Tailwind CSS в проект Pixi’VN, рекомендуемые плагины и примеры использования для стилизации диалогов и интерфейса.
Шаблоны
Во всех шаблонах 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-элементам.
- tw-animate-css: Плагин Tailwind CSS v4, портирующий популярную библиотеку Animate.css в виде утилитарных классов. Он предоставляет готовые анимации входа, выхода и привлечения внимания (например,
- @tailwindcss/typography: Официальный плагин Typography для Tailwind CSS предоставляет набор классов для добавления красивой типографики.
Рекомендуется использовать Tailwind CSS в проекте Pixi’VN для добавления стилей или анимаций к тексту диалогов.
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;