Утилиты добавлены в v3.0

Мы добавили больше утилит в 3.0, и у всех утилит есть хорошая встроенная игровая площадка, попробуйте ее и получайте удовольствие.

Backface Visibility
Isolation
Mix Blend Mode
Shadow Color
Background Blend Mode
Background Origin
Box Decoration Break
Caret Color
Caret Opacity
Image Rendering
List Style Type
Stroke DashArray
Stroke DashOffset
Stroke LineCap
Stroke LineJoin
Hyphens
Tab Size
Text Decoration Color
Text Decoration Opacity
Text Decoration Length
Text Decoration Offset
Text Indent
Text Stroke Width
Text Stroke Color
Text Shadow
Writing Mode
Writing Orientation
Table Empty Cells
Table Caption Side
Transform Style
Rotate X
Rotate Y
Rotate Z
Scale Z
Translate Z
Perspective
Perspective Origin
Filter
Backdrop Filter

Backface Visibility

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

visible

hidden

xxxxxxxxxx
 
backface-hidden

CSS

.backface-hidden {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

Isolation

Утилиты для управления тем, должен ли элемент явно создавать новый контекст стекирования. Эти утилиты особенно полезны при использовании вместе с mix-blend-mode и z-index.

isolate

isolation-auto

​x
 
isolate

CSS

.isolate {
  isolation: isolate;
}

Mix Blend Mode

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

normal

multiply

screen

overlay

darken

lighten

color-dodge

color-burn

hard-light

soft-light

difference

exclusion

hue

saturation

color

luminosity

xxxxxxxxxx
 
mix-blend-multiply

CSS

.mix-blend-multiply {
  mix-blend-mode: multiply;
}

Box Shadow Color

transparent

current

gray-500

red-500

yellow-500

blue-500

green-500

xxxxxxxxxx
 
shadow-gray-500

CSS

.shadow-gray-500 {
  --tw-shadow-color: 107, 114, 128;
}

Персонализация

windi.config.js

export default {
  theme: {
    boxShadowColor: {
      gray: '#1c1c1e',
    },
  },
}

Background Blend Mode

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

normal

multiply

screen

overlay

darken

lighten

color-dodge

color-burn

hard-light

soft-light

difference

exclusion

hue

saturation

color

luminosity

xxxxxxxxxx
 
bg-blend-normal

CSS

.bg-blend-normal {
  background-blend-mode: normal;
}

Background Origin

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

border

padding

content

xxxxxxxxxx
 
bg-origin-border

CSS

.bg-origin-border {
  background-origin: border-box;
}

Box Decoration Break

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

slice

clone

xxxxxxxxxx
 
decoration-slice

CSS

.decoration-slice {
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}

Caret Color

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

transparent

current

gray-500

red-500

yellow-500

blue-500

green-500

xxxxxxxxxx
 
caret-gray-500

CSS

.caret-gray-500 {
  --tw-caret-opacity: 1;
  caret-color: rgba(107, 114, 128, var(--tw-caret-opacity));
}

Персонализация

windi.config.js

export default {
  theme: {
    caretColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Caret Opacity

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

100

xxxxxxxxxx
 
caret-opacity-50

CSS

.caret-opacity-50 {
  --tw-caret-opacity: 0.5;
}

Персонализация

windi.config.js

export default {
  theme: {
    extend: {
      caretOpacity: {
        light: '0.1',
      },
    },
  },
}

Image Rendering

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

auto

pixel

edge

xxxxxxxxxx
 
image-render-pixel

CSS

.image-render-pixel {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-pixelated;
  image-rendering: pixelated;
}

List Style Type

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

none

disc

circle

square

decimal

zero-decimal

greek

roman

upper-roman

alpha

upper-alpha

xxxxxxxxxx
 
list-disc

CSS

.list-disc {
  list-style-type: disc;
}

Персонализация

windi.config.js

export default {
  theme: {
    listStyleType: {
      none: 'none',
      disc: 'disc',
      decimal: 'decimal',
      square: 'square',
      roman: 'upper-roman',
    },
  },
}

Stroke DashArray

Утилита stroke-dash - это служебная программа для презентаций, определяющая образец штрихов и пробелов, используемых для рисования контура фигуры.

100

xxxxxxxxxx
 
stroke-dash-2

CSS

.stroke-dash-2 {
  stroke-dasharray: 2;
}

Stroke DashOffset

Утилита stroke-offset - это служебная программа представления, определяющая смещение при отображении связанного массива штрихов.

100

xxxxxxxxxx
 
stroke-offset-2

CSS

.stroke-offset-2 {
  stroke-dashoffset: 2;
}

Stroke LineCap

Утилита stroke-cap - это служебная программа представления, определяющая форму, которая будет использоваться в конце открытых подпутей при их обводке.

auto

square

round

xxxxxxxxxx
 
stroke-cap-auto

CSS

.stroke-cap-auto {
  stroke-linecap: butt;
}

Stroke LineJoin

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

auto

bevel

round

xxxxxxxxxx
 
stroke-join-auto

CSS

.stroke-join-auto {
  stroke-linejoin: miter;
}

Hyphens

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

none

manual

auto

xxxxxxxxxx
 
hyphens-auto

CSS

.hyphens-auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Tab Size

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

default

7.5px

2rem

xxxxxxxxxx
 
tab

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

Text Decoration

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

Text Decoration Type

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

underline

line-through

no-underline

xxxxxxxxxx
 
underline

CSS

.underline {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}

Text Decoration Color

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

transparent

current

gray-500

red-500

yellow-500

blue-500

green-500

xxxxxxxxxx
 
underline-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',
    },
  },
}

Text Decoration Opacity

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

100

xxxxxxxxxx
 
underline-opacity-50

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

Text Decoration Length

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

auto

0.1rem

3px

0.3em

xxxxxxxxxx
 
underline-auto

CSS

.underline-auto {
  text-decoration-thickness: auto;
}

Персонализация

windi.config.js

export default {
  theme: {
    extend: {
      textDecorationLength: {
        sm: '1px',
        md: '2px',
        lg: '4px',
      },
    },
  },
}

Text Decoration Offset

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

auto

0.6rem

8.5px

0.5em

xxxxxxxxxx
 
underline-offset-auto

CSS

.underline-offset-auto {
  text-underline-offset: auto;
}

Персонализация

windi.config.js

export default {
  theme: {
    textDecorationOffset: {
      sm: '1px',
      md: '2px',
      lg: '4px',
    },
  },
}

Text Indent

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

default

2xl

3xl

1.8rem

2em

1/2

-xs

-1em

xxxxxxxxxx
 
indent

CSS

.indent {
  text-indent: 1.5rem;
}

Персонализация

windi.config.js

export default {
  theme: {
    extend: {
      textIndent: {
        '4xl': '5rem',
        '5xl': '6rem',
      },
    },
  },
}

Text Stroke

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

Text Stroke Width

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

default

none

0.1rem

3px

0.3em

xxxxxxxxxx
 
text-stroke-md

CSS

.text-stroke-md {
  -webkit-text-stroke-width: medium;
}

Персонализация

windi.config.js

export default {
  theme: {
    extend: {
      textStrokeWidth: {
        'xl': '6',
        '2xl': '8',
      },
    },
  },
}

Text Stroke Color

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

transparent

current

gray-500

red-500

yellow-500

blue-500

green-500

xxxxxxxxxx
 
text-stroke-blue-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',
    },
  },
}

Text Shadow

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

default

none

xxxxxxxxxx
 
text-shadow-lg

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

Writing Mode

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

normal

vertical-right

vertical-left

xxxxxxxxxx
 
write-vertical-right

CSS

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

Writing Orientation

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

mixed

upright

sideways

xxxxxxxxxx
 
write-orient-mixed

CSS

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

Table Caption Side

Утилита caption помещает содержимое таблицы <caption> на указанную сторону. Значения относятся к режиму записи таблицы.

top

bottom

xxxxxxxxxx
 
caption-top

CSS

.caption-top {
  caption-side: top;
}

Table Empty Cells

Утилита empty-cells устанавливает, появляются ли границы и фон вокруг ячеек <table>, которые не имеют видимого содержимого. Хорошим вариантом использования пустых ячеек может быть ситуация, когда вы можете не знать, будет ли таблица содержать пустые точки данных или нет, и вы решили их скрыть.

visible

hidden

xxxxxxxxxx
 
empty-cells-visible

CSS

.empty-cells-visible {
  empty-cells: show;
}

Transform Type

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

default

gpu

none

xxxxxxxxxx
 
transform

CSS

.transform {
  --tw-rotate: 0;
  --tw-rotate-x: 0;
  --tw-rotate-y: 0;
  --tw-rotate-z: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scale-z: 1;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-translate-z: 0;
  -webkit-transform: rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z));
  -ms-transform: rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z));
  transform: rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z));
}

Transform Style

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

flat

xxxxxxxxxx
 
preserve-3d

CSS

.preserve-3d {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

Rotate X

72.5

180

-180

-90

-72.5

-45

-12

-6

xxxxxxxxxx
 
rotate-x-30

CSS

.rotate-x-30 {
  --tw-rotate-x: 30deg;
}

Rotate Y

72.5

180

-180

-90

-72.5

-45

-12

-6

xxxxxxxxxx
 
rotate-y-45

CSS

.rotate-y-45 {
  --tw-rotate-y: 45deg;
}

Rotate Z

72.5

180

-180

-90

-72.5

-45

-12

-6

xxxxxxxxxx
 
rotate-z-12

CSS

.rotate-z-12 {
  --tw-rotate-z: 12deg;
}

Scale Z

100

105

110

125

150

xxxxxxxxxx
 
scale-z-90

CSS

.scale-z-90 {
  --tw-scale-z: .9;
}

Персонализация

windi.config.js

export default {
  theme: {
    scale: {
      half: '.5',
      full: '1',
    },
  },
}

Translate Z

full

7.5

1/2

2/3

3/4

3/5

3.5rem

42px

6em

-px

-full

-6

-12

-7.5

-1/2

-2/3

-3/4

-3/5

-3.5rem

-42px

xxxxxxxxxx
 
translate-z-0

CSS

.translate-z-0 {
  --tw-translate-z: 0px;
}

Персонализация

Вы можете настроить глобальную шкалу интервалов в разделах theme.spacing или theme.extend.spacing вашего файла windi.config.js:

windi.config.js

export default {
  theme: {
    extend: {
      spacing: {
        72: '18rem',
        84: '21rem',
        96: '24rem',
      },
    },
  },
}

Чтобы настроить масштаб перевода отдельно, используйте раздел theme.translate в файле windi.config.js.

windi.config.js

export default {
  theme: {
    extend: {
      translate: {
        '1/7': '14.2857143%',
        '2/7': '28.5714286%',
        '3/7': '42.8571429%',
        '4/7': '57.1428571%',
        '5/7': '71.4285714%',
        '6/7': '85.7142857%',
      },
    },
  },
}

Perspective

Утилита perspect определяет расстояние между плоскостью z=0 и пользователем, чтобы придать трехмерному позиционируемому элементу некоторую перспективу.

none

2xl

3xl

4xl

5xl

6xl

7xl

100

200

300

400

500

600

700

800px

23rem

xxxxxxxxxx
 
perspect-lg

CSS

.perspect-lg {
  -webkit-perspective: 32rem;
  perspective: 32rem;
}

Персонализация

windi.config.js

export default {
  theme: {
    extend: {
      perspective: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    },
  },
}

Perspective Origin

Утилита perspect-origin определяет позицию, на которую смотрит зритель. Он используется как точка схода утилитой perspect utility.

center

top

top-right

right

bottom-right

bottom

bottom-left

left

top-left

[150%]

[-150%]

[150%_150%]

xxxxxxxxxx
 
perspect-origin-center

CSS

.perspect-origin-center {
  -webkit-perspective-origin: center;
  perspective-origin: center;
}

Персонализация

windi.config.js

export default {
  theme: {
    extend: {
      perspectiveOrigin: {
        tb150: '150% 150%',
        tb200: '200% 200%',
      },
    },
  },
}

Filter

Утилиты для включения и отключения фильтров на элементе.

default

none

xxxxxxxxxx
 
filter

CSS

.filter {
  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

Filter Blur

default

2xl

3xl

24px

2rem

xxxxxxxxxx
 
blur-sm

CSS

.blur-sm {
  --tw-blur: blur(4px);
}

Персонализация

windi.config.js

export default {
  theme: {
    blur: {
      '4xl': '72px',
      '5xl': '96px',
      '6xl': '128px',
    },
  },
}

Filter Brightness

100

105

110

115

125

150

175

200

251

xxxxxxxxxx
 
brightness-100

CSS

.brightness-100 {
  --tw-brightness: brightness(1);
}

Персонализация

windi.config.js

export default {
  theme: {
    brightness: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Filter Contrast

100

105

110

115

125

150

175

200

251

xxxxxxxxxx
 
contrast-100

CSS

.contrast-100 {
  --tw-contrast: contrast(1);
}

Персонализация

windi.config.js

export default {
  theme: {
    contrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Filter Drop Shadow

default

2xl

none

xxxxxxxxxx
 
drop-shadow-md

CSS

.drop-shadow-md {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
}

Персонализация

windi.config.js

export default {
  theme: {
    dropShadow: {
      '3xl': 'drop-shadow(0 30px 30px rgba(0, 0, 0, 0.2))',
      '4xl': 'drop-shadow(0 40px 40px rgba(0, 0, 0, 0.3))',
    },
  },
}

Filter Grayscale

default

100

xxxxxxxxxx
 
grayscale

CSS

.grayscale {
  --tw-grayscale: grayscale(100%);
}

Персонализация

windi.config.js

export default {
  theme: {
    grayscale: {
      50: '0.5',
      80: '0.8',
    },
  },
}

Filter Hue Rotate

120

180

-120

-90

-60

-45

-30

-15

xxxxxxxxxx
 
hue-rotate-45

CSS

.hue-rotate-45 {
  --tw-hue-rotate: hue-rotate(45deg);
}

Персонализация

windi.config.js

export default {
  theme: {
    hueRotate: {
      sm: '60',
      lg: '90',
      xl: '180',
    },
  },
}

Filter Invert

default

100

xxxxxxxxxx
 
invert

CSS

.invert {
  --tw-invert: invert(100%);
}

Персонализация

windi.config.js

export default {
  theme: {
    invert: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Filter Saturate

default

100

xxxxxxxxxx
 
saturate-0

CSS

.saturate-0 {
  --tw-saturate: saturate(0);
}

Персонализация

windi.config.js

export default {
  theme: {
    saturate: {
      sm: '0.5',
      md: '1',
      lg: '1.5',
    },
  },
}

Filter Sepia

default

100

xxxxxxxxxx
 
sepia

CSS

.sepia {
  --tw-sepia: sepia(100%);
}

Персонализация

windi.config.js

export default {
  theme: {
    sepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}

Backdrop Filter

Утилиты для включения и отключения фоновых фильтров для элемента.

default

none

xxxxxxxxxx
 
backdrop-filter

CSS

.backdrop-filter {
  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

Backdrop Blur

default

2xl

3xl

24px

2rem

xxxxxxxxxx
 
backdrop-blur-sm

CSS

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
}

Персонализация

windi.config.js

export default {
  theme: {
    backdropBlur: {
      '4xl': '72px',
      '5xl': '96px',
      '6xl': '128px',
    },
  },
}

Backdrop Brightness

100

105

110

115

125

150

175

200

251

xxxxxxxxxx
 
backdrop-brightness-100

CSS

.backdrop-brightness-100 {
  --tw-backdrop-brightness: brightness(1);
}

Персонализация

windi.config.js

export default {
  theme: {
    backdropBrightness: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Backdrop Contrast

100

105

110

115

125

150

175

200

251

xxxxxxxxxx
 
backdrop-contrast-100

CSS

.backdrop-contrast-100 {
  --tw-backdrop-contrast: contrast(1);
}

Персонализация

windi.config.js

export default {
  theme: {
    backdropContrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Backdrop Grayscale

default

100

xxxxxxxxxx
 
backdrop-grayscale

CSS

.backdrop-grayscale {
  --tw-backdrop-grayscale: grayscale(100%);
}

Персонализация

windi.config.js

export default {
  theme: {
    backdropGrayscale: {
      50: '0.5',
      80: '0.8',
    },
  },
}

Backdrop Hue Rotate

120

180

-120

-90

-60

-45

-30

-15

xxxxxxxxxx
 
backdrop-hue-rotate-45

CSS

.backdrop-hue-rotate-45 {
  --tw-backdrop-hue-rotate: hue-rotate(45deg);
}

Персонализация

windi.config.js

export default {
  theme: {
    backdropHueRotate: {
      sm: '60',
      lg: '90',
      xl: '180',
    },
  },
}

Backdrop Invert

default

100

xxxxxxxxxx
 
backdrop-invert

CSS

.backdrop-invert {
  --tw-backdrop-invert: invert(100%);
}

Персонализация

windi.config.js

export default {
  theme: {
    backdropInvert: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Backdrop Opacity

100

xxxxxxxxxx
 
backdrop-opacity-50

CSS

.backdrop-opacity-50 {
  --tw-backdrop-opacity: opacity(0.5);
}

Персонализация

windi.config.js

export default {
  theme: {
    backdropOpacity: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Backdrop Saturate

default

100

xxxxxxxxxx
 
backdrop-saturate-0

CSS

.backdrop-saturate-0 {
  --tw-backdrop-saturate: saturate(0);
}

Персонализация

windi.config.js

export default {
  theme: {
    backdropSaturate: {
      sm: '0.5',
      md: '1',
      lg: '1.5',
    },
  },
}

Backdrop Sepia

default

100

xxxxxxxxxx
 
backdrop-sepia

CSS

.backdrop-sepia {
  --tw-backdrop-sepia: sepia(100%);
}

Персонализация

windi.config.js

export default {
  theme: {
    backdropSepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}

Утилиты добавлены в v3.0 #

Backface Visibility #

Isolation #

Mix Blend Mode #

Box Shadow Color #

Background Blend Mode #

Background Origin #

Box Decoration Break #

Caret Color #

Caret Opacity #

Image Rendering #

List Style Type #

Stroke DashArray #

Stroke DashOffset #

Stroke LineCap #

Stroke LineJoin #

Hyphens #

Tab Size #

Text Decoration #

Text Decoration Type #

Text Decoration Color #

Text Decoration Opacity #

Text Decoration Length #

Text Decoration Offset #

Text Indent #

Text Stroke #

Text Stroke Width #

Text Stroke Color #

Text Shadow #

Writing Mode #

Writing Orientation #

Table Caption Side #

Table Empty Cells #

Transform Type #

Transform Style #

Rotate X #

Rotate Y #

Rotate Z #

Scale Z #

Translate Z #

Perspective #

Perspective Origin #

Filter #

Filter Blur #

Filter Brightness #

Filter Contrast #

Filter Drop Shadow #

Filter Grayscale #

Filter Hue Rotate #

Filter Invert #

Filter Saturate #

Filter Sepia #

Backdrop Filter #

Backdrop Blur #

Backdrop Brightness #

Backdrop Contrast #

Backdrop Grayscale #

Backdrop Hue Rotate #

Backdrop Invert #

Backdrop Opacity #

Backdrop Saturate #

Backdrop Sepia #

Утилиты добавлены в v3.0

Backface Visibility

Isolation

Mix Blend Mode

Box Shadow Color

Background Blend Mode

Background Origin

Box Decoration Break

Caret Color

Caret Opacity

Image Rendering

List Style Type

Stroke DashArray

Stroke DashOffset

Stroke LineCap

Stroke LineJoin

Hyphens

Tab Size

Text Decoration

Text Decoration Type

Text Decoration Color

Text Decoration Opacity

Text Decoration Length

Text Decoration Offset

Text Indent

Text Stroke

Text Stroke Width

Text Stroke Color

Text Shadow

Writing Mode

Writing Orientation

Table Caption Side

Table Empty Cells

Transform Type

Transform Style

Rotate X

Rotate Y

Rotate Z

Scale Z

Translate Z

Perspective

Perspective Origin

Filter

Filter Blur

Filter Brightness

Filter Contrast

Filter Drop Shadow

Filter Grayscale

Filter Hue Rotate

Filter Invert

Filter Saturate

Filter Sepia

Backdrop Filter

Backdrop Blur

Backdrop Brightness

Backdrop Contrast

Backdrop Grayscale

Backdrop Hue Rotate

Backdrop Invert

Backdrop Opacity

Backdrop Saturate

Backdrop Sepia