Поведение #

Анимация #

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

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

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

Появление #

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

Box Decoration Break #

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

Caret Color #

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

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

Caret Opacity #

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

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

Курсор #

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

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 определяет, как браузер должен отображать изображение, если оно масштабируется вверх или вниз по сравнению с его исходными размерами. По умолчанию каждый браузер будет пытаться применить псевдоним к этому масштабированному изображению, чтобы предотвратить искажение, но иногда это может быть проблемой, если мы хотим, чтобы изображение сохраняло исходную пиксельную форму.

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

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

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

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

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

Outline #

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

Outline Solid #

Outline Dotted #

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

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

Overflow #

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

Overscroll Behavior #

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

• Используйте auto, чтобы пользователь мог продолжить прокрутку родительской области прокрутки, когда они достигнут границы основной области прокрутки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Используйте 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>