tailwindcss-named-z-index

Note This plugin is still in development

By default, tailwindcss has numbered z-indexes (z-10, z-20, z-30, etc.). This plugin allows you to use named z-indexes instead which have an index based on the position in the array. The first layer in the array will have the highest z-index.

Installation

npm install tailwindcss-named-z-index
# or
yarn add tailwindcss-named-z-index

Usage

// tailwind.config.js
module.exports = {
    theme: {
        zIndexLayers: [
            'header',   // z-index: 30
            'modal',    // z-index: 20
            'dropdown', // z-index: 10
        ]
    },
    plugins: [require('tailwindcss-named-z-index')],
}

<div class="z-header"></div>
<div class="z-sidebar"></div>
<div class="z-dropdown"></div>

Credits

• Max Hoogenbosch
• All Contributors

License

The MIT License (MIT). Please see License File for more information.