From 1d2d50ee6618816fcfef09797c41b8444725ba96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bendeg=C3=BAz=20Hajnal?= Date: Mon, 17 Mar 2025 13:51:13 +0100 Subject: [PATCH] Add `items-baseline-last` utility (#13888) This PR adds the `items-first-baseline` and `items-last-baseline` utility classes that can control [`baseline-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#formal_syntax) for the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#baseline). 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 --------- Co-authored-by: Philipp Spiess --- CHANGELOG.md | 1 + .../__snapshots__/intellisense.test.ts.snap | 1 + packages/tailwindcss/src/feature-flags.ts | 1 + packages/tailwindcss/src/utilities.test.ts | 18 ++++++++++++++++-- packages/tailwindcss/src/utilities.ts | 5 ++++- 5 files changed, 23 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e31c9aa6..90bf51e49 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +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 `scripting`, `scripting-none`, and `scripting-initial` variants ([#11929](https://github.com/tailwindlabs/tailwindcss/pull/11929)) +- _Experimental_: Add `items-baseline-last` utility ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128)) - _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 `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370)) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 29f45d7fc..bab443a14 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -4875,6 +4875,7 @@ exports[`getClassList 1`] = ` "isolation-auto", "italic", "items-baseline", + "items-baseline-last", "items-center", "items-end", "items-start", diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts index 404353be2..d29a8f6ca 100644 --- a/packages/tailwindcss/src/feature-flags.ts +++ b/packages/tailwindcss/src/feature-flags.ts @@ -1,3 +1,4 @@ +export const enableBaselineLast = process.env.FEATURES_ENV !== 'stable' export const enableDetailsContent = process.env.FEATURES_ENV !== 'stable' export const enableInvertedColors = process.env.FEATURES_ENV !== 'stable' export const enablePointerVariants = process.env.FEATURES_ENV !== 'stable' diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 9c732878a..b55ffe4e4 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -7312,12 +7312,24 @@ test('align-content', async () => { }) test('items', async () => { - expect(await run(['items-start', 'items-end', 'items-center', 'items-baseline', 'items-stretch'])) - .toMatchInlineSnapshot(` + expect( + await run([ + 'items-start', + 'items-end', + 'items-center', + 'items-baseline', + 'items-baseline-last', + 'items-stretch', + ]), + ).toMatchInlineSnapshot(` ".items-baseline { align-items: baseline; } + .items-baseline-last { + align-items: last baseline; + } + .items-center { align-items: center; } @@ -7341,6 +7353,8 @@ test('items', async () => { '-items-end', '-items-center', '-items-baseline', + '-items-first-baseline', + '-items-last-baseline', '-items-stretch', 'items-start/foo', 'items-end/foo', diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 2b5782993..70dedd7c3 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -11,7 +11,7 @@ import { } from './ast' import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidate' import type { DesignSystem } from './design-system' -import { enableWrapAnywhere } from './feature-flags' +import { enableBaselineLast, enableWrapAnywhere } from './feature-flags' import type { Theme, ThemeKey } from './theme' import { compareBreakpoints } from './utils/compare-breakpoints' import { DefaultMap } from './utils/default-map' @@ -1882,6 +1882,9 @@ export function createUtilities(theme: Theme) { staticUtility('items-start', [['align-items', 'flex-start']]) staticUtility('items-end', [['align-items', 'flex-end']]) staticUtility('items-baseline', [['align-items', 'baseline']]) + if (enableBaselineLast) { + staticUtility('items-baseline-last', [['align-items', 'last baseline']]) + } staticUtility('items-stretch', [['align-items', 'stretch']]) staticUtility('justify-normal', [['justify-content', 'normal']])