Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

merged 3 commits into from Mar 14, 2019


None yet
2 participants
Copy link

commented Mar 14, 2019

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:


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.


This comment has been minimized.

Copy link

commented Mar 14, 2019

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

@adamwathan adamwathan merged commit 49d852c into next Mar 14, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed

@adamwathan adamwathan deleted the rename-pin-to-inset branch Mar 14, 2019

@jan-dh jan-dh referenced this pull request Mar 19, 2019


Updated position page (#764) #86

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.