# Text

> Text components for displaying text with simple and styled formatting.

Web: https://vuemail.dev/components/text

Paste any snippet into an email built with Vuemail. The snippets are single file components that use the primitives from `@vuemaildev/vuemail`.

## Simple text

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/simple-text

### Vue

```vue
<script setup lang="ts">
import { Text } from '@vuemaildev/vuemail';
</script>

<template>
  <Text>A simple paragraph</Text>
</template>
```

## Text with styling

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/text-with-styling

### Tailwind

```vue
<script setup lang="ts">
import { Text } from '@vuemaildev/vuemail';
</script>

<template>
  <Text class="font-semibold text-[24px] text-indigo-400 leading-[32px]">
    Amazing content
  </Text>
  <Text>
    This is the actual content that the accented text above refers to.
  </Text>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import { Text } from '@vuemaildev/vuemail';
</script>

<template>
  <Text
    :style="{
      color: 'rgb(129,140,248)',
      fontSize: '24px',
      lineHeight: '32px',
      fontWeight: 600,
    }"
  >
    Amazing content
  </Text>
  <Text>
    This is the actual content that the accented text above refers to.
  </Text>
</template>
```