z-Index Utilities in Tailwind CSS

1. Default z-Index Classes

Tailwind includes several built-in z-* utilities:

• z-0 – Sets z-index: 0;
• z-10, z-20, z-30, z-40, z-50
• z-auto – Removes z-index and lets browser decide stacking

2. Example: Overlapping Cards

<div class="relative">
  <div class="absolute left-4 top-4 w-32 h-32 bg-blue-300 z-10">Box A</div>
  <div class="absolute left-8 top-8 w-32 h-32 bg-red-300 z-20">Box B</div>
</div>
            

Box B (z-20) will appear above Box A (z-10).

3. Custom z-Index in Config

You can add custom z-index values in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      zIndex: {
        '60': '60',
        '999': '999',
        'modal': '1050'
      }
    }
  }
}
            

4. Tips & Gotchas

• Positioning required: An element must be positioned (e.g., relative, absolute) for z-index to apply.
• Higher z-* values appear in front of lower ones.
• Use z-auto when you want to reset stacking behavior.

Conclusion

Tailwind’s z-index utilities make it easy to layer content and control element stacking without writing custom CSS. Combine with positioning and opacity for elegant layered interfaces.