Поведение

Анимация

Утилиты для анимации элементов с помощью CSS-анимации.

none

spin

ping

pulse

bounce

xxxxxxxxxx
 
animate-bounce

CSS

@keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  -webkit-animation: bounce 1s infinite;
  animation: bounce 1s infinite;
}

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

windi.config.js

export default {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      },
    },
  },
}

Чтобы добавить новую анимацию @keyframes, используйте раздел ключевых кадров в конфигурации вашей темы:

windi.config.js

export default {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
    },
  },
}

Появление

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

none

​x
 
appearance-none

CSS

.appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

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

Курсор

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

auto

default

pointer

wait

text

move

help

not-allowed

xxxxxxxxxx
 
cursor-pointer

CSS

.cursor-pointer {
  cursor: pointer;
}

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

windi.config.js

export default {
  theme: {
    cursor: {
      'auto': 'auto',
      'default': 'default',
      'pointer': 'pointer',
      'wait': 'wait',
      'text': 'text',
      'move': 'move',
      'not-allowed': 'not-allowed',
      'crosshair': 'crosshair',
      'zoom-in': 'zoom-in',
    },
  },
}

Рендеринг изображений

Утилита 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;
}

Тип стиля списка

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

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

Положение стиля списка

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

inside

outside

xxxxxxxxxx
 
list-inside

CSS

.list-inside {
  list-style-position: inside;
}

Outline

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

none

white

black

gray-500

red-500

yellow-500

blue-500

green-500

xxxxxxxxxx
 
outline-gray-500

CSS

.outline-gray-500 {
  outline: 2px dotted rgb(107, 114, 128);
  outline-offset: 2px;
}

Outline Solid

none

white

black

gray-500

red-500

yellow-500

blue-500

green-500

xxxxxxxxxx
 
outline-solid-gray-500

CSS

.outline-solid-gray-500 {
  outline: 2px solid rgba(107, 114, 128, var(--tw-outline-opacity, 1));
  outline-offset: 2px;
}

Outline Dotted

none

white

black

gray-500

red-500

yellow-500

blue-500

green-500

xxxxxxxxxx
 
outline-dotted-gray-500

CSS

.outline-dotted-gray-500 {
  outline: 2px dotted rgba(107, 114, 128, var(--tw-outline-opacity, 1));
  outline-offset: 2px;
}

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

windi.config.js

export default {
  theme: {
    extend: {
      outline: {
        blue: '2px solid #0000ff',
      },
    },
  },
}

Вы также можете указать значение смещения схемы для любых пользовательских утилит схемы, используя кортеж формы [outline, outlineOffset]:

windi.config.js

export default {
  theme: {
    extend: {
      outline: {
        blue: ['2px solid #0000ff', '1px'],
      },
    },
  },
}

Overflow

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

auto

hidden

visible

scroll

x-auto

x-hidden

x-visible

x-scroll

y-auto

y-hidden

y-visible

y-scroll

xxxxxxxxxx
 
overflow-auto

CSS

.overflow-auto {
  overflow: auto;
}

Overscroll Behavior

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

Используйте auto, чтобы пользователь мог продолжить прокрутку родительской области прокрутки, когда они достигнут границы основной области прокрутки.
Используйте none, чтобы прокрутка в целевой области не запускала прокрутку в родительском элементе, а также предотвращала эффекты «отскока» при прокрутке за конец контейнера.
Используйте contain, чтобы прокрутка в целевой области не запускала прокрутку в родительском элементе, но сохраняла эффекты «отскока» при прокрутке за конец контейнера в операционных системах, которые ее поддерживают.

auto

none

contain

x-auto

x-none

x-contain

y-auto

y-none

y-contain

xxxxxxxxxx
 
overscroll-auto

CSS

.overscroll-auto {
  overscroll-behavior: auto;
  -ms-scroll-chaining: chained;
}

Цвет заполнителя

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

transparent

current

gray-500

red-500

yellow-500

blue-500

green-500

xxxxxxxxxx
 
placeholder-gray-500

CSS

.placeholder-gray-500::-webkit-input-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-placeholder-opacity));
}
.placeholder-gray-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-placeholder-opacity));
}
.placeholder-gray-500:-ms-input-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-placeholder-opacity));
}
.placeholder-gray-500::-ms-input-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-placeholder-opacity));
}
.placeholder-gray-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-placeholder-opacity));
}

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

windi.config.js

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

Прозрачность заполнителя

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

100

xxxxxxxxxx
 
placeholder-opacity-50

CSS

.placeholder-opacity-50::-webkit-input-placeholder {
  --tw-placeholder-opacity: 0.5;
}
.placeholder-opacity-50::-moz-placeholder {
  --tw-placeholder-opacity: 0.5;
}
.placeholder-opacity-50:-ms-input-placeholder {
  --tw-placeholder-opacity: 0.5;
}
.placeholder-opacity-50::-ms-input-placeholder {
  --tw-placeholder-opacity: 0.5;
}
.placeholder-opacity-50::placeholder {
  --tw-placeholder-opacity: 0.5;
}

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

windi.config.js

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

Указатель событий

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

none

auto

xxxxxxxxxx
 
pointer-events-none

CSS

.pointer-events-none {
  pointer-events: none;
}

Изменить размер

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

default

none

xxxxxxxxxx
 
resize

CSS

.resize {
  resize: both;
}

Выбор пользователя

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

none

text

all

auto

xxxxxxxxxx
 
select-none

CSS

.select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Доступ к программам чтения с экрана

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

Класс	Свойства
sr-only	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
not-sr-only	position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal;

Использование

Используйте sr-only, чтобы скрыть элемент визуально, не скрывая его от программ чтения с экрана:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Настройки</span>
</a>

Используйте not-sr-only для отмены sr-only, делая элемент видимым для зрячих пользователей, а также для программ чтения с экрана. Это может быть полезно, если вы хотите визуально скрыть что-то на маленьких экранах, но показать это на больших экранах, например:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Настройки</span>
</a>

По умолчанию для этих утилит генерируются варианты реагирования и фокусировки. Вы можете использовать focus: not-sr-only, чтобы сделать элемент визуально скрытым по умолчанию, но видимым, когда пользователь переходит на него - полезно для ссылок «перейти к содержанию»:

<a href="#" class="sr-only focus:not-sr-only">
  перейти к содержанию
</a>

Поведение #

Анимация #

Появление #

Box Decoration Break #

Caret Color #

Caret Opacity #

Курсор #

Рендеринг изображений #

Тип стиля списка #

Положение стиля списка #

Outline #

Outline Solid #

Outline Dotted #

Overflow #

Overscroll Behavior #

Цвет заполнителя #

Прозрачность заполнителя #

Указатель событий #

Изменить размер #

Выбор пользователя #

Доступ к программам чтения с экрана #

Использование #

Поведение

Анимация

Появление

Box Decoration Break

Caret Color

Caret Opacity

Курсор

Рендеринг изображений

Тип стиля списка

Положение стиля списка

Outline

Outline Solid

Outline Dotted

Overflow

Overscroll Behavior

Цвет заполнителя

Прозрачность заполнителя

Указатель событий

Изменить размер

Выбор пользователя

Доступ к программам чтения с экрана

Использование