Tailwindcss: [Feature Request] add support for `justify-self` utilities

[sandren]

It seems kind of random that Tailwind provides utilities for align-self declarations, but not for justify-self. Also the current self-* classes are very ambiguous as one would not know if self-center applies align-self: center or justify-self: center until they have tried it. If it doesn't have the desired behavior, they are left to come up with some kind of custom solution, which doesn't feel very satisfying given that each plugin of Tailwind is meant to be comprehensive.

I propose that the current self-* classes be renamed to something less ambiguous (e.g., align-self-* or self-align-*) and that justify-self classes be introduced (e.g., justify-self-* or self-justify-*).

[adamwathan]

Started on this but have decided not to change anything for now because it would result in a lot of breaking changes. justify-items exists which means we'd need to rename items-center to avoid ambiguity, which means we might as well rename every single flexbox utility and that sucks.

justify-self and justify-items are ignored by Flexbox though, and only actually do anything when using CSS Grid, so there's no point in adding these until we have CSS Grid support.

I think the least bad naming when we eventually do support these will just be adding new justify-self-center and justify-items-start utilities, leaving the existing self-center and items-start names to avoid making everything extremely verbose in a way that's also a super annoying BC break.

So long term the names would be:

| CSS Property | Class |
| --- | --- |
| justify-content | justify-* |
| align-items | items-* |
| align-content | content-* |
| align-self | self-* |
| justify-items | justify-items-* |
| justify-self | justify-self-* |

Basically the Flexbox properties get preferential treatment and get the shorter names, and the CSS Grid-only properties are longer to disambiguate themselves.

[adamwathan]

Going to close this for now but this is something that would come along with CSS Grid support 👍

[hacknug]

@adamwathan maybe it'd be a good idea to label all these maybe-in-the-future issues so we can still close them but easily filter them out if/when needed?

[fex80]

... this is something that would come along with CSS Grid support

CSS Grid support seems to be here now. Yet, I cannot find justify-self in the documentation, so I assume this was left out? Are there any plans to add it in a future release? Would be really cool 😎

[adamwathan]

Would welcome a PR for these at this point 👍

[fex80]

Sure, will try if I can squeeze it in during the next couple of days ...

[adarsh4d]

Is it good to add place-items: center as a default?
To make a div center, this can replace adding justify-center and items-center classes when using flex.

Not sure of the class name, place-center maybe?

[terryupton]

Did anything come of this? Or @adamwathan are there any plans for adding this into Tailwind? The more I use CSS-gird the more I find myself reaching for these.

[paulpopus]

In the meantime, if somebody needs a plugin for adding the justify-items class here is what I have

plugin(function({ addUtilities, e }) {
      const justify = [
        'start',
        'center',
        'end',
        'baseline',
      ]
      const justifyVariants = [
        'responsive',
      ]

      const utilities = _.map(justify, (alignment) => ({
        [`.justify-items-${e(alignment)}`]: {
          'justify-items': alignment
        }
      }))

      addUtilities(utilities, justifyVariants)
    }),

You can extend each const with the properties and variants you want. When support comes in you can then remove the plugin.

EDIT:

For those coming off google, support is now in.

[simonswiss]

Linking this with #2241 👍