Typography

Font Family

Utilities for controlling the font family of an element.

sans
serif
mono
CSS
Customizing
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['ui-sans-serif', 'system-ui'],
        serif: ['ui-serif', 'Georgia'],
        mono: ['ui-monospace', 'SFMono-Regular'],
        display: ['Oswald'],
        body: ['Open Sans'],
      },
    },
  },
}

Font families can be specified as an array or as a simple comma-delimited string:

{
  // Array format:
  "sans": ["Helvetica", "Arial", "sans-serif"],
  // Comma-delimited format:
  "sans": "Helvetica, Arial, sans-serif",
}

Note that Windi CSS does not automatically escape font names for you. If you're using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.

{
  // Won't work:
  "sans": ["Exo 2", /* ... */],
  // Add quotes:
  "sans": ["\"Exo 2\"", /* ... */],
}

Font Size

Utilities for controlling the font size of an element.

xs
sm
base
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
8xl
CSS
Customizing
// windi.config.js
export default {
  theme: {
    fontSize: {
      'xs': '.75rem',
      'sm': '.875rem',
      'tiny': '.875rem',
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
    },
  },
}

You can provide a default line-height for each of your font-sizes using a tuple of the form [fontSize, lineHeight] in your windi.config.js file.

// windi.config.js
export default {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    },
  },
}

If you also want to provide a default letter-spacing value for a font size, you can do so using a tuple of the form [fontSize, { letterSpacing, lineHeight }] in your windi.config.js file.

// windi.config.js
export default {
  theme: {
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Or with a default line-height as well
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    },
  },
}

Font Smoothing

Utilities for controlling the font smoothing of an element.

antialiased
subpixel-antialiased
CSS

Font Style

Utilities for controlling the style of text.

italic
not-italic
CSS

Font Weight

Utilities for controlling the font weight of an element.

thin
extralight
light
normal
medium
semibold
bold
extrabold
black
400
600
CSS
Customizing
// windi.config.js
export default {
  theme: {
    fontWeight: {
      'hairline': 100,
      'extra-light': 100,
      'thin': 200,
      'light': 300,
      'normal': 400,
      'medium': 500,
      'semibold': 600,
      'bold': 700,
      'extrabold': 800,
      'extra-bold': 800,
      'black': 900,
    },
  },
}

Font Variant Numeric

Utilities for controlling the variant of numbers.

normal-nums
ordinal
slashed-zero
lining-nums
oldstyle-nums
proportional-nums
tabular-nums
diagonal-fractions
stacked-fractions
CSS

Hyphens

The hyphens utilities specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

none
manual
auto
CSS

Letter Spacing

Utilities for controlling the tracking (letter spacing) of an element.

tighter
tight
normal
wide
wider
widest
0px
2px
0.5em
CSS
Customizing
// windi.config.js
export default {
  theme: {
    letterSpacing: {
      tightest: '-.075em',
      tighter: '-.05em',
      tight: '-.025em',
      normal: '0',
      wide: '.025em',
      wider: '.05em',
      widest: '.25em',
    },
  },
}

Line Height

Utilities for controlling the leading (line height) of an element.

none
tight
snug
normal
relaxed
loose
0
1
2
3
4
5
6
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
      },
    },
  },
}

Tab Size

The tab-size utilities are used to customize the width of tab characters (U+0009).

default
0
2
4
8
7.5px
2rem
CSS
Customizing
// windi.config.js
export default {
  theme: {
    tabSize: {
      sm: '2',
      md: '4',
      lg: '8',
    },
  },
}

Text Alignment

Utilities for controlling the alignment of text.

left
center
right
justify
CSS

Text Color

Utilities for controlling the text color of an element.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
export default {
  theme: {
    textColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Text Decoration

Utilities for controlling the decoration of text.

Text Decoration Type

Utilities for controlling the type of text decoration.

underline
line-through
no-underline
CSS

Text Decoration Style

Utilities for controlling the style of text decoration.

solid
double
dotted
dashed
CSS

Text Decoration Color

Utilities for controlling the color of text decoration.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
export default {
  theme: {
    textDecorationColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Text Decoration Opacity

Utilities for controlling the opacity of an element's decoration color.

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      textDecorationOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Text Decoration Length

Utilities for controlling the length of text decoration.

auto
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      textDecorationLength: {
        sm: '1px',
        md: '2px',
        lg: '4px',
      },
    },
  },
}

Text Decoration Offset

Utilities for controlling the offset of text decoration.

auto
1
2
3
4
5
6
7
8
0.6rem
8.5px
0.5em
CSS
Customizing
// windi.config.js
export default {
  theme: {
    textDecorationOffset: {
      sm: '1px',
      md: '2px',
      lg: '4px',
    },
  },
}

Text Indent

Utilities for controlling the indentation of text.

default
xs
sm
md
lg
xl
2xl
3xl
1.8rem
2em
1/2
-xs
-1em
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      textIndent: {
        '4xl': '5rem',
        '5xl': '6rem',
      },
    },
  },
}

Text Opacity

Utilities for controlling the opacity of an element's text color.

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      textOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Text Shadow

Utilities for controlling the shadow of a text element.

default
sm
md
lg
xl
none
CSS
Customizing
// windi.config.js
export default {
  theme: {
    textShadow: {
      'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility.
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
  },
}

Text Stroke

Utilities for controlling the stroke of a text element.

Text Stroke Width

Utilities for controlling the width of text stroke.

default
none
sm
md
lg
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      textStrokeWidth: {
        'xl': '6',
        '2xl': '8',
      },
    },
  },
}

Text Stroke Color

Utilities for controlling the color of text stroke.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
export default {
  theme: {
    textStrokeColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Text Transform

Utilities for controlling the transformation of text.

uppercase
lowercase
capitalize
normal-case
CSS

Text Overflow

Utilities for controlling text overflow in an element.

truncate
overflow-ellipsis
overflow-clip
CSS

Vertical Alignment

Utilities for controlling the vertical alignment of an inline or table-cell box.

baseline
top
middle
bottom
text-top
text-bottom
CSS

Whitespace

Utilities for controlling an element's white-space property.

normal
nowrap
pre
pre-line
pre-wrap
CSS

Word Break

Utilities for controlling word breaks in an element.

normal
words
all
CSS

Writing Mode

The writing-mode utility sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).

normal
vertical-right
vertical-left
CSS

Writing Orientation

The writing-orientation utility sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

mixed
upright
sideways
CSS