# Tailwind CSS (/start/markup-tailwindcss)



<Accordions>
  <Accordion title="What is Tailwind CSS?" id="what-is-tailwindcss">
    Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. It is a low-level framework that provides a set of utility classes that can be used to build custom designs without having to leave the HTML. You can learn more on the [Tailwind CSS website](https://tailwindcss.com/).
  </Accordion>
</Accordions>

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    In all templates, the Tailwind CSS is already installed and configured.
  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/markup#css">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

There are various Tailwind CSS plugins available. Here is a list of some of them:

* [tailwind-animations](https://tailwind-animations.com/): 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](https://github.com/Wombosvideo/tw-animate-css): A Tailwind CSS v4 plugin that ports the popular [Animate.css](https://animate.style/) 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](https://github.com/tailwindlabs/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.

```ts title="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;
```

<iframe
  src="https://play.tailwindcss.com/w745YOtxBy?layout=preview"
  title="Tailwind CSS Motion"
  style="{
      width: &#x22;100%&#x22;,
      height: &#x22;320px&#x22;,
      border: &#x22;0&#x22;,
      borderRadius: &#x22;4px&#x22;,
      overflow: &#x22;hidden&#x22;,
  }"
/>