---
title: "Introduction"
description: "A Tailwind block for Vue single file components."
canonical_url: "https://vue-tailwind-block.netlify.app/getting-started/introduction"
---
# Introduction

> A Tailwind block for Vue single file components.

`vue-tailwind-block` lets a Vue component keep its Tailwind classes in a
`<tailwind>` block instead of in the template. The block is YAML, grouped
under names you choose, and the template reads it from a variable called
`classes`.

This alert has a box, a title and a body, and two tones. Each tone changes
the colors of the box and the title, so the block groups the tone classes
under the part they style:

<code-preview>
<div className="flex,w-full,flex-col,gap-3">
<example-alert title="Update available" tone="info">

Version 2.0 is ready to install.

</example-alert>

<example-alert title="Payment failed" tone="danger">

Your card was declined. Check the details and try again.

</example-alert>
</div>

<template v-slot:code="">

```vue [Alert.vue]
<script setup lang="ts">
defineProps<{ tone: 'info' | 'danger', title: string }>()
</script>

<template>
  <div role="alert" :class="[classes.root, classes.tones[tone].root]">
    <p :class="[classes.title, classes.tones[tone].title]">{{ title }}</p>
    <p :class="classes.body"><slot /></p>
  </div>
</template>

<tailwind lang="yaml">
root: flex flex-col gap-1 rounded-lg border px-4 py-3 text-sm
title: font-medium
body: opacity-80

# each tone colors the box and the title, the body stays neutral
tones:
  info:
    root: border-sky-500/30 bg-sky-500/10
    title: text-sky-500
  danger:
    root: border-red-500/30 bg-red-500/10
    title: text-red-500
</tailwind>
```

</template>
</code-preview>

Adding a new tone only requires adding a key in the YAML—no template
changes or manual lookup objects needed. The `classes` variable is
available in both `<template>` and `<script setup>` with zero imports
required.

The block never reaches the browser: it has zero runtime overhead (0 kB).
The build compiles it into a plain JavaScript object at the top of
`<script setup>`, and a plugin for the Vue language tools types that
object in the editor and in `vue-tsc`.

## When to use it

A `<tailwind>` block works best for multi-part components, variant
matrices, and reusable design system elements where styling logic
would otherwise clutter the template or script. For simple single-element
components with two or three static classes, leaving them inline in the
template is usually simpler.


## Sitemap

See the full [sitemap](https://vue-tailwind-block.netlify.app/sitemap.md) for all pages.