tailwindcss/docs/source/text.md

extends	title
_layouts.markdown	Text

Text

Family Sizes Weight Colors Alignment Styles Line height Letter spacing

Font family

<div class="sans"></div>
<div class="serif"></div>
<div class="mono"></div>

div {
  .sans;
  .serif;
  .mono;
}

// Customize the font stack
@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
@font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
@font-family-base: @font-family-sans;

Font sizes

<div class="text-xs"></div>
<div class="text-sm"></div>
<div class="text-base"></div>
<div class="text-lg"></div>
<div class="text-xl"></div>
<div class="text-2xl"></div>
<div class="text-3xl"></div>

div {
  .text-xs;
  .text-sm;
  .text-base;
  .text-lg;
  .text-xl;
  .text-2xl;
  .text-3xl;
}

// Customize the text size scale
@text-size-scale:
  'xs' @font-size-xs,
  'sm' @font-size-sm,
  'base' @font-size-base,
  'lg' @font-size-lg,
  'xl' @font-size-xl,
  '2xl' @font-size-2xl,
  '3xl' @font-size-3xl,
;

Font weight

<div class="text-hairline"></div>
<div class="text-thin"></div>
<div class="text-regular"></div>
<div class="text-medium"></div>
<div class="text-bold"></div>

div {
  .text-hairline;
  .text-thin;
  .text-regular;
  .text-medium;
  .text-bold;
}

// Customize the text weight scale
@text-weight-scale:
  'hairline' 200,
  'thin' 300,
  'regular' 400,
  'medium' 600,
  'bold' 700,
;

Colors

<div class="text-light"></div>
<div class="text-light-soft"></div>
<div class="text-light-softer"></div>
<div class="text-light-softest"></div>

<div class="text-dark"></div>
<div class="text-dark-soft"></div>
<div class="text-dark-softer"></div>
<div class="text-dark-softest"></div>

div {
  .text-light;
  .text-light-soft;
  .text-light-softer;
  .text-light-softest;

  .text-dark;
  .text-dark-soft;
  .text-dark-softer;
  .text-dark-softest;
}

// Customize the text colors
@text-colors:
  'light' hsl(0, 0%, 100%),
  'light-soft' hsl(0, 0%, 60%),
  'light-softer' hsl(0, 0%, 45%),
  'light-softest' hsl(0, 0%, 35%),

  'dark' hsl(0, 0%, 25%),
  'dark-soft' hsl(0, 0%, 50%),
  'dark-softer' hsl(0, 0%, 65%),
  'dark-softest' hsl(0, 0%, 75%),
;

Alignment

div {
  // Horizontal
  .text-center;
  .text-left;
  .text-right;
  .text-justify;

  // Vertical
  .align-baseline;
  .align-top;
  .align-middle;
  .align-bottom;
  .align-text-top;
  .align-text-bottom;
}

Styles

div { .text-em; }            // Italic
div { .text-uppercase; }     // Uppercase
div { .text-underline; }     // Underline
div { .text-break; }         // Pre line
div { .text-no-wrap; }       // No wrap
div { .text-force-wrap; }    // Break word
div { .text-smooth; }        // Anti-aliased
div { .text-strike; }        // Line through
div { .text-ellipsis; }      // Overflow ellipsis
div { .text-shadow-solid; }  // Shadow

Line height

<div class="leading-none"></div>
<div class="leading-tight"></div>
<div class="leading-normal"></div>
<div class="leading-loose"></div>

div {
  .leading-none;
  .leading-tight;
  .leading-normal;
  .leading-loose;
}

// Set the default line height
@line-height: 1.5;

// Customize the leading scale
@leading-scale:
  'none' 1,
  'tight' 1.25,
  'normal' 1.5,
  'loose' 2,
;

Letter spacing

<div class="tracking-tight"></div>
<div class="tracking-normal"></div>
<div class="tracking-wide"></div>

div {
  .tracking-tight;
  .tracking-normal;
  .tracking-wide;
}

// Customize the tracking scale
@tracking-scale:
  'tight' -0.05em,
  'normal' 0,
  'wide' 0.1em,
;