Z-индекс

Применение

Управляйте порядком стека (или трехмерным расположением) элемента в Tailwind, независимо от порядка, в котором он был отображен, с помощью утилит z-{index}.

Адаптивность

Чтобы управлять z-индексом элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите z-index. Например, используйте md:z-50, чтобы применить утилиту z-50 только при средних размерах экрана и выше.

<div class="z-0 md:z-50 ...">
  <!-- ... -->
</div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Шкала Z-индекса

По умолчанию Tailwind предоставляет шесть числовых утилит z-index и утилиту auto. Вы изменяете, добавляете или удаляете их, редактируя раздел theme.zIndex Вашей конфигурации Tailwind.

  // tailwind.config.js
  module.exports = {
    theme: {
      zIndex: {
        '0': 0,
-       '10': 10,
-       '20': 20,
-       '30': 30,
-       '40': 40,
-       '50': 50,
+       '25': 25,
+       '50': 50,
+       '75': 75,
+       '100': 100,
        'auto': 'auto',
      }
    }
  }

Отрицательные значения

Если вы хотите добавить какие-либо классы с отрицательным z-индексом, которые имеют ту же форму, что и классы Tailwind отрицательные поля, поставьте перед ключами в файле конфигурации дефис:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        zIndex: {
+         '-10': '-10',
        }
      }
    }
  }

Tailwind достаточно умен, чтобы генерировать классы вроде -z-10, когда видит начальную черту, а не z--10, как вы могли ожидать.

Варианты

По умолчанию, только responsive, focus-within и focus варианты создаются для утилит z-index.

Вы можете контролировать, какие варианты создаются для утилит z-index для изменения свойства zIndex в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и active:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       zIndex: ['hover', 'active'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения z-index, Вы можете полностью отключить их, установив для zIndex свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     zIndex: false,
    }
  }