From dff8fa7f501697f0d3d20dd79400f22bf816f5c8 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 31 May 2024 12:31:33 +0200
Subject: [PATCH 1/5] move `length` data type from `background-position` to
 `background-size`

This way it's backwards compatible with v3.
---
 packages/tailwindcss/src/utilities.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 473dc4e23474..0b21b4cb4a65 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2510,11 +2510,11 @@ export function createUtilities(theme: Theme) {
         ])
 
       switch (type) {
-        case 'length':
         case 'percentage':
         case 'position': {
           return [decl('background-position', value)]
         }
+        case 'length':
         case 'size':
         case 'bg-size': {
           return [decl('background-size', value)]

From 855d9ddd638583805468bb64187a6c011f6a0bc0 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 31 May 2024 12:32:08 +0200
Subject: [PATCH 2/5] sort data types

---
 packages/tailwindcss/src/utilities.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 0b21b4cb4a65..712864b5d3d2 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2514,9 +2514,9 @@ export function createUtilities(theme: Theme) {
         case 'position': {
           return [decl('background-position', value)]
         }
+        case 'bg-size':
         case 'length':
-        case 'size':
-        case 'bg-size': {
+        case 'size': {
           return [decl('background-size', value)]
         }
         case 'image':

From c820f950c9210882f95c7c77d27fe1ce43eaef14 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 31 May 2024 12:36:16 +0200
Subject: [PATCH 3/5] update changelog

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a84f326b1c83..d36544f29be2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Use `length` data type for `background-size` instead of `background-position` ([#13771](https://github.com/tailwindlabs/tailwindcss/pull/13771))
 
 ## [4.0.0-alpha.15] - 2024-05-08
 

From ce0dd72b379da62c722ce3c75a21e4d7738fe696 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 31 May 2024 12:48:03 +0200
Subject: [PATCH 4/5] make sure `length` is inferred later

Otherwise `bg-[120px]` would be inferred as `length` instead of
`position`.

In v3 this maps to `position` instead of `length`.
```css
.bg-\[120px\] {
  background-position: 120px;
}
```
---
 packages/tailwindcss/src/utilities.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 712864b5d3d2..a5b9da8622f9 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2502,10 +2502,10 @@ export function createUtilities(theme: Theme) {
         inferDataType(value, [
           'image',
           'color',
-          'length',
           'percentage',
           'position',
           'bg-size',
+          'length',
           'url',
         ])
 

From bdb7d0751dc1f3c945ab058981588a1182557179 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 31 May 2024 12:50:41 +0200
Subject: [PATCH 5/5] add explicit test cases for `length` and `size` data
 types

---
 packages/tailwindcss/src/utilities.test.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 058b477dcdb4..55e22481743a 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -7710,7 +7710,9 @@ test('bg', () => {
         'bg-[50%]',
         'bg-[120px]',
         'bg-[120px_120px]',
+        'bg-[length:120px_120px]',
         'bg-[position:120px_120px]',
+        'bg-[size:120px_120px]',
 
         // background-repeat
         'bg-repeat',
@@ -7834,7 +7836,7 @@ test('bg', () => {
       background-size: cover;
     }
 
-    .bg-\\[size\\:120px_120px\\] {
+    .bg-\\[length\\:120px_120px\\], .bg-\\[size\\:120px_120px\\] {
       background-size: 120px 120px;
     }