From 39966b27a78306305b933a5ddb1b3475b2664a75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bendeg=C3=BAz=20Hajnal?= Date: Sun, 23 Jun 2024 23:42:10 +0200 Subject: [PATCH 1/2] Add `items-first-baseline` and `items-last-baseline` utilities - v4 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#baseline --- .../__snapshots__/intellisense.test.ts.snap | 2 ++ packages/tailwindcss/src/utilities.test.ts | 23 +++++++++++++++++-- packages/tailwindcss/src/utilities.ts | 2 ++ 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 29f45d7fccb5..11422d994e45 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -4877,6 +4877,8 @@ exports[`getClassList 1`] = ` "items-baseline", "items-center", "items-end", + "items-first-baseline", + "items-last-baseline", "items-start", "items-stretch", "justify-around", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index d19d9aa111d8..fca6dcb5e05a 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -7312,8 +7312,17 @@ 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-first-baseline', + 'items-last-baseline', + 'items-stretch', + ]), + ).toMatchInlineSnapshot(` ".items-baseline { align-items: baseline; } @@ -7326,6 +7335,14 @@ test('items', async () => { align-items: flex-end; } + .items-first-baseline { + align-items: baseline; + } + + .items-last-baseline { + align-items: last baseline; + } + .items-start { align-items: flex-start; } @@ -7341,6 +7358,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..1914bebbcd09 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -1875,6 +1875,8 @@ 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']]) + staticUtility('items-first-baseline', [['align-items', 'first baseline']]) + staticUtility('items-last-baseline', [['align-items', 'last baseline']]) staticUtility('items-stretch', [['align-items', 'stretch']]) staticUtility('justify-normal', [['justify-content', 'normal']]) From 2aff5522cd50ca0d4e1b87662b50d61e0c77299a Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 17 Mar 2025 13:25:52 +0100 Subject: [PATCH 2/2] Rename to `items-baseline-end` --- CHANGELOG.md | 1 + .../src/__snapshots__/intellisense.test.ts.snap | 3 +-- packages/tailwindcss/src/feature-flags.ts | 1 + packages/tailwindcss/src/utilities.test.ts | 15 +++++---------- packages/tailwindcss/src/utilities.ts | 7 ++++--- 5 files changed, 12 insertions(+), 15 deletions(-) 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 11422d994e45..bab443a14ad3 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -4875,10 +4875,9 @@ exports[`getClassList 1`] = ` "isolation-auto", "italic", "items-baseline", + "items-baseline-last", "items-center", "items-end", - "items-first-baseline", - "items-last-baseline", "items-start", "items-stretch", "justify-around", 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 fca6dcb5e05a..f06a0bf5c21e 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -7318,8 +7318,7 @@ test('items', async () => { 'items-end', 'items-center', 'items-baseline', - 'items-first-baseline', - 'items-last-baseline', + 'items-baseline-last', 'items-stretch', ]), ).toMatchInlineSnapshot(` @@ -7327,6 +7326,10 @@ test('items', async () => { align-items: baseline; } + .items-baseline-last { + align-items: last baseline; + } + .items-center { align-items: center; } @@ -7335,14 +7338,6 @@ test('items', async () => { align-items: flex-end; } - .items-first-baseline { - align-items: baseline; - } - - .items-last-baseline { - align-items: last baseline; - } - .items-start { align-items: flex-start; } diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 1914bebbcd09..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,8 +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']]) - staticUtility('items-first-baseline', [['align-items', 'first baseline']]) - staticUtility('items-last-baseline', [['align-items', 'last baseline']]) + if (enableBaselineLast) { + staticUtility('items-baseline-last', [['align-items', 'last baseline']]) + } staticUtility('items-stretch', [['align-items', 'stretch']]) staticUtility('justify-normal', [['justify-content', 'normal']])