tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Add `items-first-baseline` and `items-last-baseline` utilities - v3

Open hbendev opened this issue 1 year ago • 0 comments

This PR adds the items-first-baseline and items-last-baseline utility classes that can control baseline-position for the align-items property.

Browser support:

  • MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#browser_compatibility
  • Can I use first baseline: https://caniuse.com/?search=align%20items%3A%20first%20baseline
  • Can I use last baseline: https://caniuse.com/?search=align%20items%3A%20last%20baseline

The feature were requested multiple times:

  • https://github.com/tailwindlabs/tailwindcss/discussions/13518
  • https://github.com/tailwindlabs/tailwindcss/discussions/12406
  • https://github.com/tailwindlabs/tailwindcss/discussions/11623
  • https://github.com/tailwindlabs/tailwindcss/discussions/4855

A special plugin in tailwind.config.js can be used as an existing workaround:

plugin(function extendItemsBaselineUtilities({ addUtilities }) {
  // https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#start
  // https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#end
  addUtilities({
    ".items-first-baseline": { "align-items": "first baseline" },
    ".items-last-baseline": { "align-items": "last baseline" },
  });
});

V4 counterpart PR: https://github.com/tailwindlabs/tailwindcss/pull/13888

hbendev avatar Jun 23 '24 22:06 hbendev