Rename pin utilities to top/right/bottom/left/inset and make customizable

[adamwathan]

In Tailwind 0.x we took the fairly heavy handed approach of assuming that anything you could accomplish with top: {value} could also be accomplished with top: 0; margin-top: {value}. We did this mostly for file size concerns, and take to advantage of Tailwind's inherit composability so it wasn't necessary to duplicate the spacing scale to yet another category of utilities.

Because of that stance, we named the top/right/bottom/left classes pin-{side}, because the idea is that you were pinning the element to some edge of the container, since we only supported a zero value. This was also convenient because we wanted to be able to pin an element to all sides using a single class, and unlike margin/padding, CSS didn't have any sort of shorthand property for setting top/right/bottom/left all at once, so we had nowhere to draw naming inspiration from (or so we thought.) If we called pin-t top-0 instead, what would we call pin-x?

Later I discovered that there is at least one very important use case for setting a top value other than zero, and that's when working with sticky positioning, one of the most useful new-ish features I've ever come across in CSS.

When I realized I needed stuff like top-16 to get sticky positioned elements in the right place, I started to regret our pin-t approach. I also realized that people sometimes need things like left: 100% when you are trying to position an element outside of its parent, like you might do with a complex nested dropdown.

People have suggested supporting classes like pin-t-16 or pin-l-full in the past, but that feels like a bad name compared to top-16 or left-full, so instead of living with that naming debt forever I think it's worth fixing it now for 1.0.

The question of course was what to name the shorthand pin, pin-x, and pin-y properties 🤔 Well it turns out, in the new-ish CSS Logical Properties and Values spec there is a new inset property, which is a shorthand for top/right/bottom/left! 🎉

So this PR introduces the following class name changes:

Old	New
.pin-none	.inset-auto
.pin	.inset-0
.pin-y	.inset-y-0
.pin-x	.inset-x-0
.pin-t	.top-0
.pin-r	.right-0
.pin-b	.bottom-0
.pin-l	.left-0

It also adds the following new classes by default:

Class
.inset-y-auto
.inset-x-auto
.top-auto
.right-auto
.bottom-auto
.left-auto

It also makes all of these values customizable using a new inset key in the theme config:

module.exports = {
  theme: {
    inset: {
      '0': 0,
      auto: 'auto',
    },
  }
}

These classes now live in a new inset plugin instead of the position plugin, so their variants are also controlled separately:

module.exports = {
  variants: {
    position: ['responsive'],
    inset: ['responsive'],
  }
}

This is an annoying BC break but I think it's worth it to not regret the pin-{side} naming convention for years to come.

[devcircus]

I've needed this on most of my recent projects, great job thinking this through.

[craigerskine]

I still don't understand this change. Makes far less sense to me now. The single "pin" was just so simple to use. Now I have to do all this trial and error and I end up having to consult the documentation constantly. I've used sticky a ton with Tailwind v0.X.X and I've never had any problems.

[hacknug]

@craigerskine might be annoying having to learn some class names once again but I assure you this change will make a lot of sense to you soon™: https://developer.mozilla.org/es/docs/Web/CSS/inset

If this doesn't convince you, you can still build a plugin to bring back pin and keep working with it the way we did pre-v1.x 👍

[nikkijd]

This is very helpful. I though i am unable to use top|left|bottom|right: 100% which is important too.

Thanks keep up the great work @adamwathan

[tlgreg]

@nikkijd You should be able to configure it to have 100% too.

module.exports = {
  theme: {
    extend: {
      inset: {
        full: '100%',
      },
    },
  },
}