Deprecate col-gap and row-gap in favor of gap-x and gap-y

[adamwathan]

This PR renames the col-gap and row-gap utilities to gap-x and gap-y accordingly. I don't know what possessed me to ever name them col-gap and row-gap because it's inconsistent with how other things in Tailwind are named, and it trips me up constantly. Is row-gap the gaps in a row, or the gaps between rows? Always gets me.

The new names feel more natural when using gap with Flexbox too (even though Flexbox does still use column-gap and row-gap as the CSS property names) because Flexbox doesn't really have rows and columns.

Shorter too 🤷

This PR introduces the new names alongside the old names (so increasing the CSS size a little bit), and adds the ability to remove the old names behind a removeDeprecatedGapUtilities flag under the future key.

You can opt-in to removing the old names like this:

// tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
}

The console will emit a warning for anyone who doesn't opt-in to this after they upgrade, which should help nudge people to make this change in preparation for Tailwind 2.0.

Before I merge this I'll need to make sure I create a documentation page for this flagging stuff so that we can put a link in the console warning directing people to a place where they can learn more about the warning and the consequences of making the change.

[robertdrakedennis]

Would there also be a place for a class that performs both gap-x and gap-y? potentially gap-{number} to do both?

[adamwathan]

Already exists! Has since we released grid support:

https://tailwindcss.com/docs/gap/#app

Just didn't need to rename that one.

[hacknug]

YES PLEASE ADAM THANK YOU ❤️

[jhonyjss]

Hello, I'm facing in my terminal a lot of this message:

info - You have opted-in to future-facing breaking changes: removeDeprecatedGapUtilities
info - These changes are stable and will be the default behavior in the next major version of Tailwind.

How Can I remove this ? ** I'm using nuxt.

[hacknug]

How Can I remove this ? ** I'm using nuxt.

You need to opt-out of this behavior if I'm not mistaken.