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: 2 months 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 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-09T20:42:46.000Z (over 2 years ago)
- Last Synced: 2025-04-22T02:19:42.009Z (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.
```