diff --git a/CHANGELOG.md b/CHANGELOG.md index 1abf149f49b6..1668c50dcd69 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 29f45d7fccb5..bab443a14ad3 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 404353be2804..d29a8f6cadd4 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 d19d9aa111d8..f06a0bf5c21e 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 31acd41df2a4..cfa8191ffece 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' @@ -1875,6 +1875,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']])