Defining your own utility classes in Tailwind

One of the best parts of using Tailwind is defining your own utility functions.

I needed a negative z-index, but Tailwind didn't have one, so I created my own:

@layer utilities {
  .-z-1 {
    z-index: -1;
  }
}

Anything wrapped with @layer utilities { ... } will be picked by Tailwind as a utility class.

If you need to use a custom utility class responsively or deal with hover states or dark mode, you get that all for free in v3.0!

However, if you're in an older version of you can wrap it in a @variants responsive { ... } block:

@layer utilities {
  @variants responsive {
    .-z-1 {
      z-index: -1;
    }
  }
}

This lets you write md:-z-1 lg:z-0 and have the utility class respond to screen size.