Add self-baseline-last (#17476)

This PR also adds a new `self-baseline-last` utility similar to
`items-baseline-last` added previously. We've also discussed adding a
`content-baseline-last` utility but since the browser support for this
[is very
limited](https://caniuse.com/mdn-css_properties_align-content_flex_context_last_baseline)
and we weren't able to get this to do anything even in the supported
browsers, we decided against it.

## Test plan

Updated the utility tests.
This commit is contained in:
Philipp Spiess 2025-04-01 13:55:41 +02:00 committed by GitHub
parent f590be43b8
commit 55d7a65cfc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 10 additions and 1 deletions

View File

@ -12,7 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- _Experimental_: Add `details-content` variant ([#15319](https://github.com/tailwindlabs/tailwindcss/pull/15319))
- _Experimental_: Add `inverted-colors` variant ([#11693](https://github.com/tailwindlabs/tailwindcss/pull/11693))
- _Experimental_: Add `noscript` variant ([#11929](https://github.com/tailwindlabs/tailwindcss/pull/11929), [#17431](https://github.com/tailwindlabs/tailwindcss/pull/17431))
- _Experimental_: Add `items-baseline-last` utility ([#13888](https://github.com/tailwindlabs/tailwindcss/pull/13888))
- _Experimental_: Add `items-baseline-last` and `self-baseline-last` utilities ([#13888](https://github.com/tailwindlabs/tailwindcss/pull/13888), [#17476](https://github.com/tailwindlabs/tailwindcss/pull/17476))
- _Experimental_: Add `pointer-none`, `pointer-coarse`, and `pointer-fine` variant ([#16946](https://github.com/tailwindlabs/tailwindcss/pull/16946))
- _Experimental_: Add `any-pointer-none`, `any-pointer-coarse`, and `any-pointer-fine` variants ([#16941](https://github.com/tailwindlabs/tailwindcss/pull/16941))
- _Experimental_: Add safe alignment utilities ([#14607](https://github.com/tailwindlabs/tailwindcss/pull/14607))

View File

@ -9608,6 +9608,7 @@ exports[`getClassList 1`] = `
"select-text",
"self-auto",
"self-baseline",
"self-baseline-last",
"self-center",
"self-center-safe",
"self-end",

View File

@ -8946,6 +8946,7 @@ test('self', async () => {
'self-center-safe',
'self-stretch',
'self-baseline',
'self-baseline-last',
]),
).toMatchInlineSnapshot(`
".self-auto {
@ -8956,6 +8957,10 @@ test('self', async () => {
align-self: baseline;
}
.self-baseline-last {
align-self: last baseline;
}
.self-center {
align-self: center;
}

View File

@ -2038,6 +2038,9 @@ export function createUtilities(theme: Theme) {
}
staticUtility('self-stretch', [['align-self', 'stretch']])
staticUtility('self-baseline', [['align-self', 'baseline']])
if (enableBaselineLast) {
staticUtility('self-baseline-last', [['align-self', 'last baseline']])
}
staticUtility('justify-self-auto', [['justify-self', 'auto']])
staticUtility('justify-self-start', [['justify-self', 'flex-start']])