Logo Windi CSS

Типография

Семейство шрифтов

Утилиты для управления семейством шрифтов элемента.

sans
serif
mono
CSS
.font-sans {
  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
Персонализация 
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'],
      },
    },
  },
}

Семейства шрифтов можно указать как массив или как простую строку с разделителями-запятыми:

{
  // Формат массива:
  "sans": ["Helvetica", "Arial", "sans-serif"],
  // Формат с разделителями-запятыми:
  "sans": "Helvetica, Arial, sans-serif",
}

Обратите внимание, что Windi CSS не экранирует имена шрифтов автоматически. Если вы используете шрифт, содержащий недопустимый идентификатор, заключите его в кавычки или экранируйте недопустимые символы.

{
  // Не будет работать:
  "sans": ["Exo 2", /* ... */],
  // Добавить кавычки:
  "sans": ["\"Exo 2\"", /* ... */],
}

Размер шрифта

Утилиты для управления размером шрифта элемента.

xs
sm
base
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
8xl
CSS
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
Персонализация
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',
    },
  },
}

Вы можете указать высоту строки по умолчанию для каждого размера шрифта, используя кортеж формы [fontSize, lineHeight] в файле windi.config.js.

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

Если вы также хотите указать значение межбуквенного интервала по умолчанию для размера шрифта, вы можете сделать это, используя кортеж вида [fontSize, { letterSpacing, lineHeight }] в вашем файле windi.config.js.

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',
      }],
    },
  },
}

Сглаживание шрифтов

Утилиты для управления сглаживанием шрифта элемента.

antialiased
subpixel-antialiased
CSS
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Стиль шрифта

Утилиты для управления стилем текста.

italic
not-italic
CSS
.italic {
  font-style: italic;
}

Толщина шрифта

Утилиты для управления жирностью шрифта элемента.

thin
extralight
light
normal
medium
semibold
bold
extrabold
black
400
600
CSS
.font-normal {
  font-weight: 400;
}
Персонализация
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,
    },
  },
}

Числовой вариант шрифта

Утилиты для управления вариантом чисел.

normal-nums
ordinal
slashed-zero
lining-nums
oldstyle-nums
proportional-nums
tabular-nums
diagonal-fractions
stacked-fractions
CSS
.ordinal {
  --tw-ordinal: ordinal;
  --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/);
  --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/);
  --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/);
  --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/);
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

Дефисы

Утилиты дефисов определяют, как слова должны быть расставлены через дефис, когда текст переносится на несколько строк. Он может полностью предотвратить расстановку переносов, переносить перенос в заданные вручную места в тексте или позволить браузеру автоматически вставлять переносы там, где это необходимо.

none
manual
auto
CSS
.hyphens-auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Межбуквенное расстояние

Утилиты для управления отслеживанием (межбуквенным интервалом) элемента.

tighter
tight
normal
wide
wider
widest
0px
2px
0.5em
CSS
.tracking-normal {
  letter-spacing: 0em;
}
Персонализация
windi.config.js
export default {
  theme: {
    letterSpacing: {
      tightest: '-.075em',
      tighter: '-.05em',
      tight: '-.025em',
      normal: '0',
      wide: '.025em',
      wider: '.05em',
      widest: '.25em',
    },
  },
}

Высота строки

Утилиты для управления интерлиньяжем (высотой строки) элемента.

none
tight
snug
normal
relaxed
loose
0
1
2
3
4
5
6
CSS
.leading-normal {
  line-height: 1.5;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
      },
    },
  },
}

Размер табуляции

Утилиты размера табуляции используются для настройки ширины символов табуляции (U+0009).

default
0
2
4
8
7.5px
2rem
CSS
.tab {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}
Персонализация
windi.config.js
export default {
  theme: {
    tabSize: {
      sm: '2',
      md: '4',
      lg: '8',
    },
  },
}

Выравнивание текста

Утилиты для контроля выравнивания текста.

left
center
right
justify
CSS
.text-left {
  text-align: left;
}

Цвет текста

Утилиты для управления цветом текста элемента.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
}
Персонализация
windi.config.js
export default {
  theme: {
    textColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Оформление текста

Утилиты для управления оформлением текста.

Тип оформления текста

Утилиты для управления типом оформления текста.

underline
line-through
no-underline
CSS
.underline {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}

Стиль оформления текста

Утилиты для управления стилем оформления текста.

solid
double
dotted
dashed
CSS
.underline-solid {
  -webkit-text-decoration-style: solid;
  text-decoration-style: solid;
}

Цвет оформления текста

Утилиты для управления цветом оформления текста.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.underline-green-500 {
  --tw-line-opacity: 1;
  -webkit-text-decoration-color: rgba(16, 185, 129, var(--tw-line-opacity));
  text-decoration-color: rgba(16, 185, 129, var(--tw-line-opacity));
}
Персонализация
windi.config.js
export default {
  theme: {
    textDecorationColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Прозрачность оформления текста

Утилиты для управления непрозрачностью цвета оформления элемента.

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
.underline-opacity-50 {
  --tw-line-opacity: 0.5;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      textDecorationOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Длина оформления текста

Утилиты для управления длиной оформления текста.

auto
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
.underline-auto {
  text-decoration-thickness: auto;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      textDecorationLength: {
        sm: '1px',
        md: '2px',
        lg: '4px',
      },
    },
  },
}

Смещение оформления текста

Утилиты для управления смещением оформления текста.

auto
1
2
3
4
5
6
7
8
0.6rem
8.5px
0.5em
CSS
.underline-offset-auto {
  text-underline-offset: auto;
}
Персонализация
windi.config.js
export default {
  theme: {
    textDecorationOffset: {
      sm: '1px',
      md: '2px',
      lg: '4px',
    },
  },
}

Отступ текста

Утилиты для управления отступом текста.

default
xs
sm
md
lg
xl
2xl
3xl
1.8rem
2em
1/2
-xs
-1em
CSS
.indent {
  text-indent: 1.5rem;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      textIndent: {
        '4xl': '5rem',
        '5xl': '6rem',
      },
    },
  },
}

Непрозрачность текста

Утилиты для управления непрозрачностью цвета текста элемента.

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
.text-opacity-50 {
  --tw-text-opacity: 0.5;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      textOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Тень текста

Утилиты для управления тенью текстового элемента.

default
sm
md
lg
xl
none
CSS
.text-shadow-lg {
  text-shadow: 3px 3px 6px rgb(0 0 0 / 26%), 0 0 5px rgb(15 3 86 / 22%);
}
Персонализация
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)',
    },
  },
}

Обводка текста

Утилиты для управления обводкой текстового элемента.

Ширина обводки текста

Утилиты для управления шириной обводки текста.

default
none
sm
md
lg
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
.text-stroke-md {
  -webkit-text-stroke-width: medium;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      textStrokeWidth: {
        'xl': '6',
        '2xl': '8',
      },
    },
  },
}

Цвет обводки текста

Утилиты для управления цветом обводки текста.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.text-stroke-blue-500 {
  --tw-text-stroke-opacity: 1;
  -webkit-text-stroke-color: rgba(59, 130, 246, var(--tw-text-stroke-opacity));
}
Персонализация
windi.config.js
export default {
  theme: {
    textStrokeColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Преобразование текста

Утилиты для управления преобразованием текста.

uppercase
lowercase
capitalize
normal-case
CSS
.uppercase {
  text-transform: uppercase;
}

Переполнение текста

Утилиты для управления переполнением текста в элементе.

truncate
overflow-ellipsis
overflow-clip
CSS
.truncate {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Вертикальное выравнивание

Утилиты для управления вертикальным выравниванием встроенного поля или поля таблицы-ячейки.

baseline
top
middle
bottom
text-top
text-bottom
CSS
.align-baseline {
  vertical-align: baseline;
}

Пробел

Утилиты для управления свойством пустого пространства элемента.

normal
nowrap
pre
pre-line
pre-wrap
CSS
.whitespace-normal {
  white-space: normal;
}

Перенос слов

Утилиты для управления разрывами слов в элементе.

normal
words
all
CSS
.break-normal {
  word-break: normal;
  overflow-wrap: normal;
}

Режим записи

Утилита writing-mode устанавливает, будут ли строки текста располагаться по горизонтали или вертикали, а также направление, в котором происходит прогресс блоков. При установке для всего документа он должен быть установлен в корневом элементе (элемент html для документов HTML).

normal
vertical-right
vertical-left
CSS
.write-vertical-right {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

Ориентация записи

Утилита writing-orientation устанавливает ориентацию текстовых символов в строке. Это влияет только на текст в вертикальном режиме (когда writing-mode не horizontal-tb). Это полезно для управления отображением языков, использующих вертикальный сценарий, а также для создания заголовков вертикальных таблиц.

mixed
upright
sideways
CSS
.write-orient-mixed {
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
}