Use variables with fallbacks for utility classes (#13177)

* Use variables with fallbacks for utility classes

* Update playwright test

* rename `resolveBare` to `resolveValue`

* make private methods really private

---------

Co-authored-by: Adam Wathan <[email protected]>
Co-authored-by: Robin Malfait <[email protected]>

Author: adamwathan

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -585,12 +585,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
 @layer utilities {
   .text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
+    font-size: var(--font-size-2xl, 1.5rem);
+    line-height: var(--font-size-2xl--line-height, 2rem);
   }
 
   .text-black\\/50 {
-    color: #00000080;
+    color: color-mix(in srgb, var(--color-black, #000) 50%, transparent);
   }
 
   .underline {

packages/@tailwindcss-postcss/src/index.test.ts

@@ -104,7 +104,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
     ".foo {
-      color: #ef4444;
+      color: var(--color-red-500, #ef4444);
     }"
   `)
 })

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -404,11 +404,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
 }
 
 .w-4 {
-  width: 1rem;
+  width: var(--spacing-4, 1rem);
 }
 
 .bg-red-500 {
-  background-color: #ef4444;
+  background-color: var(--color-red-500, #ef4444);
 }
 
 .shadow {

packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap

@@ -95,11 +95,11 @@ exports[`border-* 1`] = `
 }
 
 .border-red-500 {
-  border-color: #ef4444;
+  border-color: var(--color-red-500, #ef4444);
 }
 
 .border-red-500\\/50 {
-  border-color: #ef444480;
+  border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-transparent {
@@ -208,11 +208,11 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-red-500 {
-  border-bottom-color: #ef4444;
+  border-bottom-color: var(--color-red-500, #ef4444);
 }
 
 .border-b-red-500\\/50 {
-  border-bottom-color: #ef444480;
+  border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-b-transparent {
@@ -321,11 +321,11 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-red-500 {
-  border-inline-end-color: #ef4444;
+  border-inline-end-color: var(--color-red-500, #ef4444);
 }
 
 .border-e-red-500\\/50 {
-  border-inline-end-color: #ef444480;
+  border-inline-end-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-e-transparent {
@@ -434,11 +434,11 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-red-500 {
-  border-left-color: #ef4444;
+  border-left-color: var(--color-red-500, #ef4444);
 }
 
 .border-l-red-500\\/50 {
-  border-left-color: #ef444480;
+  border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-l-transparent {
@@ -547,11 +547,11 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-red-500 {
-  border-right-color: #ef4444;
+  border-right-color: var(--color-red-500, #ef4444);
 }
 
 .border-r-red-500\\/50 {
-  border-right-color: #ef444480;
+  border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-r-transparent {
@@ -660,11 +660,11 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-red-500 {
-  border-inline-start-color: #ef4444;
+  border-inline-start-color: var(--color-red-500, #ef4444);
 }
 
 .border-s-red-500\\/50 {
-  border-inline-start-color: #ef444480;
+  border-inline-start-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-s-transparent {
@@ -773,11 +773,11 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-red-500 {
-  border-top-color: #ef4444;
+  border-top-color: var(--color-red-500, #ef4444);
 }
 
 .border-t-red-500\\/50 {
-  border-top-color: #ef444480;
+  border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-t-transparent {
@@ -915,13 +915,13 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-red-500 {
-  border-left-color: #ef4444;
-  border-right-color: #ef4444;
+  border-left-color: var(--color-red-500, #ef4444);
+  border-right-color: var(--color-red-500, #ef4444);
 }
 
 .border-x-red-500\\/50 {
-  border-left-color: #ef444480;
-  border-right-color: #ef444480;
+  border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-x-transparent {
@@ -1060,13 +1060,13 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-red-500 {
-  border-top-color: #ef4444;
-  border-bottom-color: #ef4444;
+  border-top-color: var(--color-red-500, #ef4444);
+  border-bottom-color: var(--color-red-500, #ef4444);
 }
 
 .border-y-red-500\\/50 {
-  border-top-color: #ef444480;
-  border-bottom-color: #ef444480;
+  border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-y-transparent {