https://github.com/xammie/tailwindcss-named-z-index

Use named classes for z-index in tailwindcss
https://github.com/xammie/tailwindcss-named-z-index

tailwindcss tailwindcss-plugin z-index

Last synced: about 1 month ago
JSON representation

Use named classes for z-index in tailwindcss

• Host: GitHub
• URL: https://github.com/xammie/tailwindcss-named-z-index
• Owner: Xammie
• License: mit
• Created: 2023-05-11T18:00:32.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-06-09T20:42:46.000Z (over 1 year ago)
• Last Synced: 2024-05-02T00:06:39.798Z (8 months ago)
• Topics: tailwindcss, tailwindcss-plugin, z-index
• Language: JavaScript
• Homepage:
• Size: 11.7 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


    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

```bash

npm install tailwindcss-named-z-index

# or

yarn add tailwindcss-named-z-index

```

## Usage

```js

// 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')],

}

```

```html







```


## Credits

- [Max Hoogenbosch](https://github.com/Xammie)

- [All Contributors](../../contributors)

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

```