diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 9ec67647fec8..c43ed5fbd1e0 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -490,12 +490,46 @@ exports[`getClassList 1`] = ` "bg-left", "bg-left-bottom", "bg-left-top", + "bg-linear-to-b", + "bg-linear-to-bl", + "bg-linear-to-br", + "bg-linear-to-l", + "bg-linear-to-r", + "bg-linear-to-t", + "bg-linear-to-tl", + "bg-linear-to-tr", "bg-local", "bg-no-repeat", "bg-none", "bg-origin-border", "bg-origin-content", "bg-origin-padding", + "bg-radial-circle-b", + "bg-radial-circle-bl", + "bg-radial-circle-br", + "bg-radial-circle-c", + "bg-radial-circle-closest-corner", + "bg-radial-circle-closest-side", + "bg-radial-circle-farthest-corner", + "bg-radial-circle-farthest-side", + "bg-radial-circle-l", + "bg-radial-circle-r", + "bg-radial-circle-t", + "bg-radial-circle-tl", + "bg-radial-circle-tr", + "bg-radial-ellipse-b", + "bg-radial-ellipse-bl", + "bg-radial-ellipse-br", + "bg-radial-ellipse-c", + "bg-radial-ellipse-closest-corner", + "bg-radial-ellipse-closest-side", + "bg-radial-ellipse-farthest-corner", + "bg-radial-ellipse-farthest-side", + "bg-radial-ellipse-l", + "bg-radial-ellipse-r", + "bg-radial-ellipse-t", + "bg-radial-ellipse-tl", + "bg-radial-ellipse-tr", "bg-repeat", "bg-repeat-x", "bg-repeat-y", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 7594130be926..8f40d879d138 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -7690,6 +7690,8 @@ test('bg', () => { // background-image 'bg-none', + + // Legacy linear gradient version 'bg-gradient-to-t', 'bg-gradient-to-tr', 'bg-gradient-to-r', @@ -7698,13 +7700,24 @@ test('bg', () => { 'bg-gradient-to-bl', 'bg-gradient-to-l', 'bg-gradient-to-tl', + + // Modern linear-gradient version + 'bg-linear-to-t', + 'bg-linear-to-tr', + 'bg-linear-to-r', + 'bg-linear-to-br', + 'bg-linear-to-b', + 'bg-linear-to-bl', + 'bg-linear-to-l', + 'bg-linear-to-tl', + 'bg-[url(/image.png)]', 'bg-[url:--my-url]', 'bg-[linear-gradient(to_bottom,red,blue)]', 'bg-[image:--my-gradient]', - 'bg-gradient-[125deg]', - 'bg-gradient-[1.3rad]', - 'bg-gradient-[to_bottom]', + 'bg-linear-[125deg]', + 'bg-linear-[1.3rad]', + 'bg-linear-[to_bottom]', // background-size 'bg-auto', @@ -7813,15 +7826,7 @@ test('bg', () => { background-image: var(--my-url); } - .bg-gradient-\\[1\\.3rad\\] { - background-image: linear-gradient(74.4845deg, var(--tw-gradient-stops, )); - } - - .bg-gradient-\\[125deg\\] { - background-image: linear-gradient(125deg, var(--tw-gradient-stops, )); - } - - .bg-gradient-\\[to_bottom\\], .bg-gradient-to-b { + .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops, )); } @@ -7853,6 +7858,46 @@ test('bg', () => { background-image: linear-gradient(to top right, var(--tw-gradient-stops, )); } + .bg-linear-\\[1\\.3rad\\] { + background-image: linear-gradient(74.4845deg, var(--tw-gradient-stops, )); + } + + .bg-linear-\\[125deg\\] { + background-image: linear-gradient(125deg, var(--tw-gradient-stops, )); + } + + .bg-linear-\\[to_bottom\\], .bg-linear-to-b { + background-image: linear-gradient(to bottom, var(--tw-gradient-stops, )); + } + + .bg-linear-to-bl { + background-image: linear-gradient(to bottom left, var(--tw-gradient-stops, )); + } + + .bg-linear-to-br { + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops, )); + } + + .bg-linear-to-l { + background-image: linear-gradient(to left, var(--tw-gradient-stops, )); + } + + .bg-linear-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops, )); + } + + .bg-linear-to-t { + background-image: linear-gradient(to top, var(--tw-gradient-stops, )); + } + + .bg-linear-to-tl { + background-image: linear-gradient(to top left, var(--tw-gradient-stops, )); + } + + .bg-linear-to-tr { + background-image: linear-gradient(to top right, var(--tw-gradient-stops, )); + } + .bg-none { background-image: none; } @@ -7985,9 +8030,10 @@ test('bg', () => { // background-image '-bg-none', '-bg-gradient-to-br', - '-bg-gradient-[125deg]', // This could be made valid maybe - '-bg-gradient-[1.3rad]', // This could be made valid maybe - '-bg-gradient-[to_bottom]', + '-bg-linear-to-br', + '-bg-linear-[125deg]', // This could be made valid maybe + '-bg-linear-[1.3rad]', // This could be made valid maybe + '-bg-linear-[to_bottom]', // background-size '-bg-auto', diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index dd542a6d22f7..78d653b9d603 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -2497,9 +2497,13 @@ export function createUtilities(theme: Theme) { staticUtility(`bg-gradient-to-${value}`, [ ['background-image', `linear-gradient(to ${direction}, var(--tw-gradient-stops,))`], ]) + + staticUtility(`bg-linear-to-${value}`, [ + ['background-image', `linear-gradient(to ${direction}, var(--tw-gradient-stops,))`], + ]) } - utilities.functional('bg-gradient', (candidate) => { + utilities.functional('bg-linear', (candidate) => { if (candidate.negative || !candidate.value) return if (candidate.value.kind === 'arbitrary') {