Letter Spacing - Tailwindcss

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

Responsive design

Customizing your theme