Use responsive modifiers on custom classes?

[zkwbbr]

Say I have a need for a height more than the default h-64. I put that in a custom class e.g., .my-h { height: 28rem; }. Would it be possible to use this custom class in the responsive modifiers? e.g., md:my-hor lg:my-h ? If not what would be the closest thing to achieve this? Thanks.

PS. I think we could really use more default heights beyond h-64.

[adamwathan]

Hey! You can do this in multiple ways.

For this particular situation I would recommend extending the spacing scale, which will trickle down to the height scale:

module.exports = {
  theme: {
    extend: {
      spacing: {
        '112': '28rem' // Named 112 to follow Tailwind's normal "1rem = 4u" scale
      }
    }
  }
}

You could also extend the height scale directly:

module.exports = {
  theme: {
    extend: {
      height: {
        '112': '28rem' // Named 112 to follow Tailwind's normal "1rem = 4u" scale
      }
    }
  }
}

For really custom classes, you can generate the responsive modifiers in your CSS like so:

@responsive {
  .my-h {
    height: 28rem;
  }
}

Here are some useful relevant docs pages:

https://tailwindcss.com/docs/theme#customizing-the-default-theme
https://tailwindcss.com/docs/adding-new-utilities#generating-responsive-variants

[zkwbbr]

That @responsive directive is fantastic.
I hope you can consider having more default spacing scale so we won't have to edit the configs on each new projects.
Thanks! :)