tailwindcss
tailwindcss copied to clipboard
Add `items-first-baseline` and `items-last-baseline` utilities - v3
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