Prepare for internal release

oxide/crates/node/npm/android-arm-eabi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-android-arm-eabi",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

oxide/crates/node/npm/android-arm64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-android-arm64",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

oxide/crates/node/npm/darwin-arm64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-darwin-arm64",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

oxide/crates/node/npm/darwin-x64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-darwin-x64",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

oxide/crates/node/npm/freebsd-x64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-freebsd-x64",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

oxide/crates/node/npm/linux-arm-gnueabihf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-linux-arm-gnueabihf",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

oxide/crates/node/npm/linux-arm64-gnu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-linux-arm64-gnu",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

oxide/crates/node/npm/linux-arm64-musl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-linux-arm64-musl",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

oxide/crates/node/npm/linux-x64-gnu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-linux-x64-gnu",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

oxide/crates/node/npm/linux-x64-musl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-linux-x64-musl",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

oxide/crates/node/npm/win32-x64-msvc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-win32-x64-msvc",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

oxide/crates/node/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",

packages/@tailwindcss-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/cli",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "repository": {

packages/@tailwindcss-postcss/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/postcss",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "description": "PostCSS plugin for Tailwind CSS, a utility-first CSS framework for rapidly building custom user interfaces",
   "license": "MIT",
   "repository": {

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

@@ -581,12 +581,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
 @layer utilities {
   .text-2xl {
-    font-size: 1.5rem;
+    font-size: var(--font-size-2xl, 1.5rem);
-    line-height: 2rem;
+    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-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/vite",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "repository": {

packages/tailwindcss/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "4.0.0-alpha.8",
+  "version": "0.0.0-internal.b2586d4e",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "repository": "https://github.com/tailwindlabs/tailwindcss.git",

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

@@ -400,11 +400,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

@@ -91,11 +91,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 {
@@ -200,11 +200,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 {
@@ -309,11 +309,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 {
@@ -418,11 +418,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 {
@@ -527,11 +527,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 {
@@ -636,11 +636,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 {
@@ -745,11 +745,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 {
@@ -882,13 +882,13 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-red-500 {
-  border-left-color: #ef4444;
+  border-left-color: var(--color-red-500, #ef4444);
-  border-right-color: #ef4444;
+  border-right-color: var(--color-red-500, #ef4444);
 }
 
 .border-x-red-500\\/50 {
-  border-left-color: #ef444480;
+  border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
-  border-right-color: #ef444480;
+  border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-x-transparent {
@@ -1022,13 +1022,13 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-red-500 {
-  border-top-color: #ef4444;
+  border-top-color: var(--color-red-500, #ef4444);
-  border-bottom-color: #ef4444;
+  border-bottom-color: var(--color-red-500, #ef4444);
 }
 
 .border-y-red-500\\/50 {
-  border-top-color: #ef444480;
+  border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
-  border-bottom-color: #ef444480;
+  border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-y-transparent {

packages/tailwindcss/src/index.test.ts

@@ -44,7 +44,7 @@ describe('compiling CSS', () => {
 
         @media (prefers-color-scheme: dark) {
           .dark\\:bg-black {
-            background-color: #000;
+            background-color: var(--color-black, #000);
           }
         }
       }"
@@ -186,28 +186,28 @@ describe('@apply', () => {
       .foo {
         --tw-translate-x: 100%;
         translate: var(--tw-translate-x) var(--tw-translate-y);
-        background-color: #ef4444;
+        animation: var(--animate-spin, spin 1s linear infinite);
+        background-color: var(--color-red-500, #ef4444);
         text-decoration-line: underline;
-        animation: 1s linear infinite spin;
       }
 
       .foo:hover {
-        background-color: #3b82f6;
+        background-color: var(--color-blue-500, #3b82f6);
       }
 
       @media (width >= 768px) {
         .foo {
-          background-color: #22c55e;
+          background-color: var(--color-green-500, #22c55e);
         }
       }
 
       .foo:hover:focus {
-        background-color: #fecaca;
+        background-color: var(--color-red-200, #fecaca);
       }
 
       @media (width >= 768px) {
         .foo:hover:focus {
-          background-color: #bbf7d0;
+          background-color: var(--color-green-200, #bbf7d0);
         }
       }
 
@@ -412,7 +412,7 @@ describe('important', () => {
       }
 
       .animate-spin\\! {
-        animation: 1s linear infinite spin !important;
+        animation: var(--animate-spin, spin 1s linear infinite) !important;
       }
 
       @keyframes spin {
@@ -458,16 +458,16 @@ describe('sorting', () => {
       }
 
       .p-1 {
-        padding: .25rem;
+        padding: var(--spacing-1, .25rem);
       }
 
       .px-1 {
-        padding-left: .25rem;
+        padding-left: var(--spacing-1, .25rem);
-        padding-right: .25rem;
+        padding-right: var(--spacing-1, .25rem);
       }
 
       .pl-1 {
-        padding-left: .25rem;
+        padding-left: var(--spacing-1, .25rem);
       }"
     `)
   })
@@ -516,17 +516,17 @@ describe('sorting', () => {
       }
 
       .mx-0 {
-        margin-left: 0;
+        margin-left: var(--spacing-0, 0px);
-        margin-right: 0;
+        margin-right: var(--spacing-0, 0px);
       }
 
       .gap-4 {
-        gap: 1rem;
+        gap: var(--spacing-4, 1rem);
       }
 
       :where(.space-x-2 > :not([hidden]) ~ :not([hidden])) {
-        margin-inline-start: calc(.5rem * calc(1 - var(--tw-space-x-reverse)));
+        margin-inline-start: calc(var(--spacing-2, .5rem) * calc(1 - var(--tw-space-x-reverse)));
-        margin-inline-end: calc(.5rem * var(--tw-space-x-reverse));
+        margin-inline-end: calc(var(--spacing-2, .5rem) * var(--tw-space-x-reverse));
       }
 
       @property --tw-space-x-reverse {
@@ -707,7 +707,7 @@ describe('Parsing themes values from CSS', () => {
       }
 
       .accent-red-500 {
-        accent-color: red;
+        accent-color: var(--color-red-500, red);
       }"
     `)
   })
@@ -730,7 +730,7 @@ describe('Parsing themes values from CSS', () => {
       }
 
       .accent-red-500 {
-        accent-color: #f10;
+        accent-color: var(--color-red-500, #f10);
       }"
     `)
   })
@@ -756,11 +756,11 @@ describe('Parsing themes values from CSS', () => {
       }
 
       .accent-blue-500 {
-        accent-color: #00f;
+        accent-color: var(--color-blue-500, #00f);
       }
 
       .accent-red-500 {
-        accent-color: red;
+        accent-color: var(--color-red-500, red);
       }"
     `)
   })
@@ -785,11 +785,11 @@ describe('Parsing themes values from CSS', () => {
       }
 
       .w-1\\/2 {
-        width: 75%;
+        width: var(--width-1\\/2, 75%);
       }
 
       .w-75\\% {
-        width: 50%;
+        width: var(--width-75\\%, 50%);
       }"
     `)
   })
@@ -822,11 +822,11 @@ describe('Parsing themes values from CSS', () => {
       }
 
       .text-lg {
-        font-size: 20px;
+        font-size: var(--font-size-lg, 20px);
       }
 
       .accent-red {
-        accent-color: red;
+        accent-color: var(--color-red, red);
       }
 
       @keyframes foo {
@@ -865,11 +865,11 @@ describe('Parsing themes values from CSS', () => {
       }
 
       .text-sm {
-        font-size: 13px;
+        font-size: var(--font-size-sm, 13px);
       }
 
       .accent-green {
-        accent-color: #0f0;
+        accent-color: var(--color-green, #0f0);
       }"
     `)
   })
@@ -900,7 +900,7 @@ describe('Parsing themes values from CSS', () => {
       }
 
       .accent-green {
-        accent-color: #0f0;
+        accent-color: var(--color-green, #0f0);
       }"
     `)
   })
@@ -938,7 +938,7 @@ describe('Parsing themes values from CSS', () => {
       }
 
       .animate-foobar {
-        animation: 1s infinite foobar;
+        animation: var(--animate-foobar, foobar 1s infinite);
       }
 
       @keyframes foobar {

packages/tailwindcss/src/theme.ts

@@ -77,11 +77,27 @@ export class Theme {
     return null
   }
 
+  var(themeKey: string) {
+    if (!this.values.has(themeKey)) {
+      return null
+    }
+
+    return `var(${themeKey}, ${this.values.get(themeKey)})`
+  }
+
   resolve(candidateValue: string, themeKeys: ThemeKey[]): string | null {
     let themeKey = this.resolveKey(candidateValue, themeKeys)
 
     if (!themeKey) return null
 
+    return this.var(themeKey)
+  }
+
+  resolveBare(candidateValue: string, themeKeys: ThemeKey[]): string | null {
+    let themeKey = this.resolveKey(candidateValue, themeKeys)
+
+    if (!themeKey) return null
+
     return this.values.get(themeKey)!
   }
 
@@ -96,13 +112,13 @@ export class Theme {
 
     let extra = {} as Record<string, string>
     for (let name of nestedKeys) {
-      let nestedValue = this.values.get(`${themeKey}${name}`)
+      let nestedValue = this.var(`${themeKey}${name}`)
       if (nestedValue) {
         extra[name] = nestedValue
       }
     }
 
-    return [this.values.get(themeKey)!, extra]
+    return [this.var(themeKey)!, extra]
   }
 
   namespace(namespace: string) {

packages/tailwindcss/src/variants.ts

@@ -512,7 +512,7 @@ export function createVariants(theme: Theme): Variants {
             if (variant.value.kind === 'arbitrary') {
               value = variant.value.value
             } else if (variant.value.kind === 'named') {
-              value = theme.resolve(variant.value.value, ['--breakpoint'])
+              value = theme.resolveBare(variant.value.value, ['--breakpoint'])
             }
 
             if (!value) return null
@@ -597,7 +597,7 @@ export function createVariants(theme: Theme): Variants {
             if (variant.value.kind === 'arbitrary') {
               value = variant.value.value
             } else if (variant.value.kind === 'named') {
-              value = theme.resolve(variant.value.value, ['--width'])
+              value = theme.resolveBare(variant.value.value, ['--width'])
             }
 
             if (!value) return null

packages/tailwindcss/tests/ui.spec.ts

@@ -144,7 +144,7 @@ test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) =>
     page,
     html`<div
       id="x"
-      class="shadow shadow-[#f00]/50 inset-shadow inset-shadow-[#0f0]/50 ring ring-white/50 inset-ring inset-ring-[#00f]/50"
+      class="shadow shadow-[#f00]/50 inset-shadow inset-shadow-[#0f0]/50 ring ring-[#fff]/50 inset-ring inset-ring-[#00f]/50"
     ></div>`,
   )