# Code Inline

> Inline code components for displaying small code snippets within text.

Web: https://vuemail.dev/components/code-inline

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

## Simple Code Inline

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

### Tailwind

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

<template>
  <Text class="text-center">
    Install the
    <CodeInline
      class="rounded-[6px] bg-gray-300 px-[4px] py-[2px]"
    >@vuemaildev/vuemail</CodeInline> package
  </Text>
</template>
```

### Inline styles

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

<template>
  <Text :style="{ textAlign: 'center' }">
    Install the
    <CodeInline
      :style="{
        backgroundColor: 'rgb(209,213,219)',
        borderRadius: '6px',
        paddingLeft: '4px',
        paddingRight: '4px',
        paddingTop: '2px',
        paddingBottom: '2px',
      }"
    >@vuemaildev/vuemail</CodeInline> package
  </Text>
</template>
```

## Code Inline with different colors

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/code-inline-with-different-colors

### Tailwind

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

<template>
  <Text class="text-center">
    Install the
    <CodeInline
      class="rounded-[6px] bg-green-300 px-[4px] py-[2px]"
    >@vuemaildev/vuemail</CodeInline> package
  </Text>
</template>
```

### Inline styles

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

<template>
  <Text :style="{ textAlign: 'center' }">
    Install the
    <CodeInline
      :style="{
        backgroundColor: 'rgb(134,239,172)',
        borderRadius: '6px',
        paddingLeft: '4px',
        paddingRight: '4px',
        paddingTop: '2px',
        paddingBottom: '2px',
      }"
    >@vuemaildev/vuemail</CodeInline> package
  </Text>
</template>
```