Proposal: .inset-center ?

[LeCoupa]

There is a utility class I use a lot in my app to center an element:

.inset-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Would it be useful to add it to Tailwind? We currently have theses classes:

.inset-0       /* top: 0; right: 0; bottom: 0; left: 0; */
.inset-y-0     /* top: 0; bottom: 0; */
.inset-x-0     /* right: 0; left: 0; */
.top-0         /* top: 0; */
.right-0       /* right: 0; */
.bottom-0      /* bottom: 0; */
.left-0        /* left: 0; */
.inset-auto    /* top: auto; right: auto; bottom: auto; left: auto; */
.inset-y-auto  /* top: auto; bottom: auto; */
.inset-x-auto  /* left: auto; right: auto; */
.top-auto      /* top: auto; */
.bottom-auto   /* bottom: auto; */
.left-auto     /* left: auto; */
.right-auto    /* right: auto; */

P-S: I made a cheat sheet about Tailwind if it can help you code faster.

[Miguelklappes]

Any news whether this will be implemented?

[etiennelenhart]

If you'd like to add this to your project right now, remember to use Tailwind's translate utilities. Otherwise other transforms may be overwritten since Tailwind uses CSS Variables for transform values.

const plugin = require('tailwindcss/plugin')

const utilities = plugin(({ addUtilities }) => {
    addUtilities({
        '.inset-center': {
            top: '50%',
            left: '50%',
            '@apply -translate-x-1/2 -translate-y-1/2': {},
        },
        '.inset-y-center': {
            top: '50%',
            '@apply -translate-y-1/2': {},
        },
        '.inset-x-center': {
            left: '50%',
            '@apply -translate-x-1/2': {},
        },
    })
})

module.exports = utilities

[vitezprchal]

Any updates?