tailwindcss/src/utilities/text.less

// Font family
@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;

.sans { font-family: @font-family-sans; }
.serif { font-family: @font-family-serif; }
.mono { font-family: @font-family-mono; }

// Default line height
@line-height: 1.5;

// Sizes
@font-size-xs:   (12rem / 16rem); // 12px
@font-size-sm:   (14rem / 16rem); // 14px
@font-size-base: (16rem / 16rem); // 16px
@font-size-lg:   (18rem / 16rem); // 18px
@font-size-xl:   (22rem / 16rem); // 22px
@font-size-2xl:  (30rem / 16rem); // 30px
@font-size-3xl:  (40rem / 16rem); // 40px

@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,
;

// Weights
@font-weight-hairline: 200;
@font-weight-thin: 300;
@font-weight-regular: 400;
@font-weight-medium: 600;
@font-weight-bold: 700;

@text-weight-scale:
  'hairline' @font-weight-hairline,
  'thin' @font-weight-thin,
  'regular' @font-weight-regular,
  'medium' @font-weight-medium,
  'bold' @font-weight-bold,
;

// Colors
@text-light:         @color-white;
@text-light-soft:    fade(@color-white, 60%);
@text-light-softer:  fade(@color-white, 45%);
@text-light-softest: fade(@color-white, 35%);

@text-dark:          @color-grey-800;
@text-dark-soft:     @color-grey-600;
@text-dark-softer:   @color-grey-500;
@text-dark-softest:  @color-grey-400;

@text-colors:
  'light'         @text-light,
  'light-soft'    @text-light-soft,
  'light-softer'  @text-light-softer,
  'light-softest' @text-light-softest,

  'dark'          @text-dark,
  'dark-soft'     @text-dark-soft,
  'dark-softer'   @text-dark-softer,
  'dark-softest'  @text-dark-softest,

  'red'          @color-red,
  'red-light'    @color-red-light,
  'orange'        @color-orange,
  'orange-light'  @color-orange-light,
  'yellow'        @color-yellow,
  'yellow-light'  @color-yellow-light,
  'green'        @color-green,
  'green-light'  @color-green-light,
  'teal'         @color-teal,
  'teal-light'   @color-teal-light,
  'blue'         @color-blue,
  'blue-light'   @color-blue-light,
  'indigo'       @color-indigo,
  'indigo-light' @color-indigo-light,
  'purple'       @color-purple,
  'purple-light' @color-purple-light,
  'pink'         @color-pink,
  'pink-light'   @color-pink-light,
;

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

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

.define-text-sizes(@text-size-scale; @screens);
.define-text-weights(@text-weight-scale; @screens);
.define-text-colors(@text-colors; @screens);
.define-leading-utilities(@leading-scale; @screens);
.define-tracking-utilities(@tracking-scale; @screens);

// Horizontal alignment
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

// Vertical alignment
.align-baseline { vertical-align: baseline; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }
.align-text-top { vertical-align: text-top; }
.align-text-bottom { vertical-align: text-bottom; }

// Styles
.text-em { font-style: italic; }
.text-uppercase { text-transform: uppercase; }
.text-underline { text-decoration: underline; }
.text-break { white-space: pre-line; }
.text-no-wrap { white-space: nowrap; }
.text-force-wrap { word-wrap: break-word; }
.text-smooth { -webkit-font-smoothing: antialiased; }
.text-strike { text-decoration: line-through; }
.text-shadow-solid { text-shadow: 0 2px 0 rgba(0,0,0,0.15); }
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.responsive({
  &text-sans { .sans; }
  &text-serif { .serif; }
  &text-mono { .mono; }
  &text-center { .text-center; }
  &text-left { .text-left; }
  &text-right { .text-right; }
  &text-justify { .text-justify; }
  &align-baseline { .align-baseline; }
  &align-top { .align-top; }
  &align-middle { .align-middle; }
  &align-bottom { .align-bottom; }
  &align-text-top { .align-text-top; }
  &align-text-bottom { .align-text-bottom; }
  &text-em { .text-em; }
  &text-uppercase { .text-uppercase; }
  &text-underline { .text-underline; }
  &text-break { .text-break; }
  &text-no-wrap { .text-no-wrap; }
  &text-force-wrap { .text-force-wrap; }
  &text-smooth { .text-smooth; }
  &text-strike { .text-strike; }
  &text-shadow-solid { .text-shadow-solid; }
  &text-ellipsis { .text-ellipsis; }
});