# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/letter-spacing.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";

export const title = "letter-spacing";
export const description = "Utilities for controlling the tracking, or letter spacing, of an element.";

<ApiTable
  rows={[
    ["tracking-tighter", "letter-spacing: var(--tracking-tighter); /* -0.05em */"],
    ["tracking-tight", "letter-spacing: var(--tracking-tight); /* -0.025em */"],
    ["tracking-normal", "letter-spacing: var(--tracking-normal); /* 0em */"],
    ["tracking-wide", "letter-spacing: var(--tracking-wide); /* 0.025em */"],
    ["tracking-wider", "letter-spacing: var(--tracking-wider); /* 0.05em */"],
    ["tracking-widest", "letter-spacing: var(--tracking-widest); /* 0.1em */"],
    ["tracking-(<custom-property>)", "letter-spacing: var(<custom-property>);"],
    ["tracking-[<value>]", "letter-spacing: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `tracking-tight` and `tracking-wide` to set the letter spacing of an element:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">tracking-tight</span>
        <p className="text-lg font-medium tracking-tight text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">tracking-normal</span>
        <p className="text-lg font-medium tracking-normal text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">tracking-wide</span>
        <p className="text-lg font-medium tracking-wide text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:tracking-tight,tracking-normal,tracking-wide] -->
<p class="tracking-tight ...">The quick brown fox ...</p>
<p class="tracking-normal ...">The quick brown fox ...</p>
<p class="tracking-wide ...">The quick brown fox ...</p>
```

</Figure>

### Using negative values

Using negative values doesn't make a ton of sense with the named letter spacing scale Tailwind includes out of the box, but if you've customized your scale to use numbers it can be useful:

```css
@theme {
  --tracking-1: 0em;
  --tracking-2: 0.025em;
  --tracking-3: 0.05em;
  --tracking-4: 0.1em;
}
```

To use a negative letter spacing value, prefix the class name with a dash to convert it to a negative value:

```html
<!-- [!code classes:-tracking-2] -->
<p class="-tracking-2">The quick brown fox ...</p>
```

### Using a custom value

<UsingACustomValue element="p" utility="tracking" name="letter spacing" value=".25em" />

### Responsive design

<ResponsiveDesign element="p" property="letter-spacing" defaultClass="tracking-tight" featuredClass="tracking-wide" />

## Customizing your theme

<CustomizingYourTheme
  element="p"
  utility="tracking"
  name="letter spacing"
  customValue="-0.075em"
  customName="tightest"
/>