# Tailwind CSS (/start/markup-tailwindcss)



**What is Tailwind CSS?** 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 get more information on how install it [here](https://tailwindcss.com/docs/installation).

<Callout title="Templates" type="info">
  In all templates, the Tailwind CSS is already installed and configured.
</Callout>

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

You can learn more on the [Tailwind CSS website](https://tailwindcss.com/).

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

* [Tailwind CSS Motion](https://docs.rombo.co/tailwind): Adds animations to your Tailwind CSS project.
* [Tailwind CSS 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. Here is an example using the `tailwindcss-motion` plugin:

```ts title="content/labels/start.label.ts"
import { narration, newLabel } from "@drincs/pixi-vn";

const startLabel = newLabel("start", [
    async () => {
        narration.dialogue = `<span className="inline-block motion-translate-y-loop-25">Hello</span>, welcome to the game!`;
    },
]);
export default startLabel;
```

<iframe
  src="https://play.tailwindcss.com/WCoOH2CSuZ?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;,
  }"
/>