diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e8dabac1990..8f66e90adbe2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Fixed + +- Fix incorrect properties in line-clamp utilities ([#13220](https://github.com/tailwindlabs/tailwindcss/pull/13220)) + ### Added - Support `@theme reference { … }` for defining theme values without emitting variables ([#13222](https://github.com/tailwindlabs/tailwindcss/pull/13222)) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 0873766a4bf6..1129c58fbb30 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1325,31 +1325,31 @@ test('line-clamp', () => { expect(run(['line-clamp-4', 'line-clamp-99', 'line-clamp-[123]', 'line-clamp-none'])) .toMatchInlineSnapshot(` ".line-clamp-4 { - overlow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; + overflow: hidden; } .line-clamp-99 { - overlow: hidden; -webkit-line-clamp: 99; -webkit-box-orient: vertical; display: -webkit-box; + overflow: hidden; } .line-clamp-\\[123\\] { - overlow: hidden; -webkit-line-clamp: 123; -webkit-box-orient: vertical; display: -webkit-box; + overflow: hidden; } .line-clamp-none { - overlow: visible; - -webkit-box-orient: horizonal; - -webkit-line-clamp: none; + -webkit-line-clamp: unset; + -webkit-box-orient: horizontal; display: block; + overflow: visible; }" `) expect(run(['line-clamp', '-line-clamp-4', '-line-clamp-[123]', '-line-clamp-none'])).toEqual('') diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index d0c1e32ffb9c..3035996db4e1 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -786,16 +786,16 @@ export function createUtilities(theme: Theme) { * @css `line-clamp` */ staticUtility('line-clamp-none', [ - ['overlow', 'visible'], + ['overflow', 'visible'], ['display', 'block'], - ['-webkit-box-orient', 'horizonal'], - ['-webkit-line-clamp', 'none'], + ['-webkit-box-orient', 'horizontal'], + ['-webkit-line-clamp', 'unset'], ]) functionalUtility('line-clamp', { themeKeys: ['--line-clamp'], handleBareValue: ({ value }) => value, handle: (value) => [ - decl('overlow', 'hidden'), + decl('overflow', 'hidden'), decl('display', '-webkit-box'), decl('-webkit-box-orient', 'vertical'), decl('-webkit-line-clamp', value),