diff --git a/defaultConfig.js b/defaultConfig.js
index 93ebdd092..a7e98b7e3 100644
--- a/defaultConfig.js
+++ b/defaultConfig.js
@@ -724,7 +724,7 @@ module.exports = {
| provide a sensible numeric scale. You can, of course, modify these
| values as needed.
|
- | Class name: .z-{name}
+ | Class name: .z-{index}
|
*/
diff --git a/docs/source/styles/z-index.blade.md b/docs/source/styles/z-index.blade.md
new file mode 100644
index 000000000..43ffdbac9
--- /dev/null
+++ b/docs/source/styles/z-index.blade.md
@@ -0,0 +1,141 @@
+---
+extends: _layouts.markdown
+title: "Z-Index"
+---
+
+# Z-Index
+
+
+ Utilities for controlling the stack order of an element.
+
+
+
+
+Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the `.z-{index}` utilities.
+
+@component('_partials.code-sample')
+
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
z-40
+z-30
+z-20
+z-10
+z-0
+@endslot
+@endcomponent
+
+## Responsive
+
+To control the z-index of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing z-index utility. For example, use `md:z-50` to apply the `z-50` utility at only medium screen sizes and above.
+
+For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation.
+
+@component('_partials.responsive-code-sample')
+@slot('none')
+
+
yellow
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
+
yellow
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
+
yellow
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
+
yellow
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
+
yellow
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
yellow
+z-40
+z-30
+z-20
+z-10
+z-0
+@endslot
+@endcomponent
+
+## Customizing
+
+By default Tailwind provides a sensible numeric z-index scale. You can, of course, modify these values as needed. This is done in the `zIndex` section of your Tailwind config.
+
+@component('_partials.customized-config')
+@slot('default')
+{
+ // ...
+ zIndex: {
+ '0': 0,
+ '10': 10,
+ '20': 20,
+ '30': 30,
+ '40': 40,
+ '50': 50,
+ 'auto': 'auto',
+ },
+}
+@endslot
+@slot('customized')
+{
+ // ...
+ zIndex: {
+ '0': 0,
+ '10': 10,
+ '20': 20,
+ '30': 30,
+ '40': 40,
+ '50': 50,
+ '60': 60,
+ '70': 70,
+ '80': 80,
+ '90': 90,
+ '100': 100,
+ 'auto': 'auto',
+ },
+}
+@endslot
+@endcomponent
diff --git a/docs/source/styles/z-index.md b/docs/source/styles/z-index.md
deleted file mode 100644
index 18b8acb78..000000000
--- a/docs/source/styles/z-index.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-extends: _layouts.markdown
-title: "Z-Index"
----
-
-# Z-Index
-
-