Text

Semantic text wrapper that renders a <p> or <span> element.

Usage

<template>
  <Text>A paragraph of text.</Text>
</template>

<p style="margin-top: 16px; font-size: 16px; line-height: 24px;">
  A paragraph of text.
</p>

By default, <Text> renders a <p> with the classes top margin and a typography reset.

You can render inline text with the as prop:

<template>
  <Text as="span">Inline text.</Text>
</template>

This renders a <span> tag with the default class text-base. You may override this with any Tailwind typography classes, for example:

<template>
  <Text as="span" class="text-sm text-slate-500">Smaller, gray text.</Text>
</template>

Props

as

Type: 'p' | 'span'
Default: 'p'

The HTML element to render.

<template>
  <Text>This renders a paragraph.</Text>
  <Text as="span">This renders a span.</Text>
</template>