From 17f8b606c78a5567b966896864b2856e93afd2fa Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Sat, 9 Mar 2024 16:43:43 -0500 Subject: [PATCH 1/3] Use variables with fallbacks for utility classes --- .../src/__snapshots__/index.test.ts.snap | 6 +- .../@tailwindcss-postcss/src/index.test.ts | 2 +- .../src/__snapshots__/index.test.ts.snap | 4 +- .../src/__snapshots__/utilities.test.ts.snap | 44 +- packages/tailwindcss/src/index.test.ts | 58 +-- packages/tailwindcss/src/theme.ts | 20 +- packages/tailwindcss/src/utilities.test.ts | 458 +++++++++--------- packages/tailwindcss/src/variants.ts | 4 +- 8 files changed, 307 insertions(+), 289 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index e581e4bb5..7bb8174f7 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/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; - 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 { diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 41bb8fddb..8896d255c 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/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); }" `) }) diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index ccaf12fe7..92eb05cd3 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/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 { diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 6e9d6e44a..1ec464f18 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/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-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 { @@ -1022,13 +1022,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 { diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 1488b4817..8f9ca909f 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/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-right: .25rem; + padding-left: var(--spacing-1, .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-right: 0; + margin-left: var(--spacing-0, 0px); + 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-end: calc(.5rem * var(--tw-space-x-reverse)); + margin-inline-start: calc(var(--spacing-2, .5rem) * calc(1 - 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 { diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts index 68cecbc16..137bff75a 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/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 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) { diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 0873766a4..8ee2621e1 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -118,7 +118,7 @@ test('inset', () => { } .-inset-4 { - inset: -1rem; + inset: calc(var(--spacing-4, 1rem) * -1); } .-inset-full { @@ -130,7 +130,7 @@ test('inset', () => { } .inset-4 { - inset: 1rem; + inset: var(--spacing-4, 1rem); } .inset-\\[4px\\] { @@ -173,8 +173,8 @@ test('inset-x', () => { } .-inset-x-4 { - left: -1rem; - right: -1rem; + right: calc(var(--spacing-4, 1rem) * -1); + left: calc(var(--spacing-4, 1rem) * -1); } .-inset-x-full { @@ -188,8 +188,8 @@ test('inset-x', () => { } .inset-x-4 { - left: 1rem; - right: 1rem; + right: var(--spacing-4, 1rem); + left: var(--spacing-4, 1rem); } .inset-x-\\[4px\\] { @@ -235,8 +235,8 @@ test('inset-y', () => { } .-inset-y-4 { - top: -1rem; - bottom: -1rem; + top: calc(var(--spacing-4, 1rem) * -1); + bottom: calc(var(--spacing-4, 1rem) * -1); } .-inset-y-full { @@ -250,8 +250,8 @@ test('inset-y', () => { } .inset-y-4 { - top: 1rem; - bottom: 1rem; + top: var(--spacing-4, 1rem); + bottom: var(--spacing-4, 1rem); } .inset-y-\\[4px\\] { @@ -297,7 +297,7 @@ test('start', () => { } .-start-4 { - inset-inline-start: -1rem; + inset-inline-start: calc(var(--spacing-4, 1rem) * -1); } .-start-full { @@ -309,7 +309,7 @@ test('start', () => { } .start-4 { - inset-inline-start: 1rem; + inset-inline-start: var(--spacing-4, 1rem); } .start-\\[4px\\] { @@ -344,7 +344,7 @@ test('end', () => { } .-end-4 { - inset-inline-end: -1rem; + inset-inline-end: calc(var(--spacing-4, 1rem) * -1); } .-end-full { @@ -356,7 +356,7 @@ test('end', () => { } .end-4 { - inset-inline-end: 1rem; + inset-inline-end: var(--spacing-4, 1rem); } .end-\\[4px\\] { @@ -392,7 +392,7 @@ test('top', () => { } .-top-4 { - top: -1rem; + top: calc(var(--spacing-4, 1rem) * -1); } .-top-full { @@ -404,7 +404,7 @@ test('top', () => { } .top-4 { - top: 1rem; + top: var(--spacing-4, 1rem); } .top-\\[4px\\] { @@ -447,7 +447,7 @@ test('right', () => { } .-right-4 { - right: -1rem; + right: calc(var(--spacing-4, 1rem) * -1); } .-right-full { @@ -459,7 +459,7 @@ test('right', () => { } .right-4 { - right: 1rem; + right: var(--spacing-4, 1rem); } .right-\\[4px\\] { @@ -502,7 +502,7 @@ test('bottom', () => { } .-bottom-4 { - bottom: -1rem; + bottom: calc(var(--spacing-4, 1rem) * -1); } .-bottom-full { @@ -514,7 +514,7 @@ test('bottom', () => { } .bottom-4 { - bottom: 1rem; + bottom: var(--spacing-4, 1rem); } .bottom-\\[4px\\] { @@ -549,7 +549,7 @@ test('left', () => { } .-left-4 { - left: -1rem; + left: calc(var(--spacing-4, 1rem) * -1); } .-left-full { @@ -561,7 +561,7 @@ test('left', () => { } .left-4 { - left: 1rem; + left: var(--spacing-4, 1rem); } .left-\\[4px\\] { @@ -907,7 +907,7 @@ test('margin', () => { } .-m-4 { - margin: -1rem; + margin: calc(var(--spacing-4, 1rem) * -1); } .-m-\\[--value\\] { @@ -915,7 +915,7 @@ test('margin', () => { } .m-4 { - margin: 1rem; + margin: var(--spacing-4, 1rem); } .m-\\[4px\\] { @@ -946,8 +946,8 @@ test('margin-x', () => { } .-mx-4 { - margin-left: -1rem; - margin-right: -1rem; + margin-left: calc(var(--spacing-4, 1rem) * -1); + margin-right: calc(var(--spacing-4, 1rem) * -1); } .-mx-\\[--value\\] { @@ -956,8 +956,8 @@ test('margin-x', () => { } .mx-4 { - margin-left: 1rem; - margin-right: 1rem; + margin-left: var(--spacing-4, 1rem); + margin-right: var(--spacing-4, 1rem); } .mx-\\[4px\\] { @@ -990,8 +990,8 @@ test('margin-y', () => { } .-my-4 { - margin-top: -1rem; - margin-bottom: -1rem; + margin-top: calc(var(--spacing-4, 1rem) * -1); + margin-bottom: calc(var(--spacing-4, 1rem) * -1); } .-my-\\[--value\\] { @@ -1000,8 +1000,8 @@ test('margin-y', () => { } .my-4 { - margin-top: 1rem; - margin-bottom: 1rem; + margin-top: var(--spacing-4, 1rem); + margin-bottom: var(--spacing-4, 1rem); } .my-\\[4px\\] { @@ -1034,7 +1034,7 @@ test('margin-top', () => { } .-mt-4 { - margin-top: -1rem; + margin-top: calc(var(--spacing-4, 1rem) * -1); } .-mt-\\[--value\\] { @@ -1042,7 +1042,7 @@ test('margin-top', () => { } .mt-4 { - margin-top: 1rem; + margin-top: var(--spacing-4, 1rem); } .mt-\\[4px\\] { @@ -1073,7 +1073,7 @@ test('margin-inline-start', () => { } .-ms-4 { - margin-inline-start: -1rem; + margin-inline-start: calc(var(--spacing-4, 1rem) * -1); } .-ms-\\[--value\\] { @@ -1081,7 +1081,7 @@ test('margin-inline-start', () => { } .ms-4 { - margin-inline-start: 1rem; + margin-inline-start: var(--spacing-4, 1rem); } .ms-\\[4px\\] { @@ -1112,7 +1112,7 @@ test('margin-inline-end', () => { } .-me-4 { - margin-inline-end: -1rem; + margin-inline-end: calc(var(--spacing-4, 1rem) * -1); } .-me-\\[--value\\] { @@ -1120,7 +1120,7 @@ test('margin-inline-end', () => { } .me-4 { - margin-inline-end: 1rem; + margin-inline-end: var(--spacing-4, 1rem); } .me-\\[4px\\] { @@ -1151,7 +1151,7 @@ test('margin-right', () => { } .-mr-4 { - margin-right: -1rem; + margin-right: calc(var(--spacing-4, 1rem) * -1); } .-mr-\\[--value\\] { @@ -1159,7 +1159,7 @@ test('margin-right', () => { } .mr-4 { - margin-right: 1rem; + margin-right: var(--spacing-4, 1rem); } .mr-\\[4px\\] { @@ -1190,7 +1190,7 @@ test('margin-bottom', () => { } .-mb-4 { - margin-bottom: -1rem; + margin-bottom: calc(var(--spacing-4, 1rem) * -1); } .-mb-\\[--value\\] { @@ -1198,7 +1198,7 @@ test('margin-bottom', () => { } .mb-4 { - margin-bottom: 1rem; + margin-bottom: var(--spacing-4, 1rem); } .mb-\\[4px\\] { @@ -1229,7 +1229,7 @@ test('margin-left', () => { } .-ml-4 { - margin-left: -1rem; + margin-left: calc(var(--spacing-4, 1rem) * -1); } .-ml-\\[--value\\] { @@ -1237,7 +1237,7 @@ test('margin-left', () => { } .ml-4 { - margin-left: 1rem; + margin-left: var(--spacing-4, 1rem); } .ml-\\[4px\\] { @@ -1268,41 +1268,41 @@ test('margin sort order', () => { } .m-4 { - margin: 1rem; + margin: var(--spacing-4, 1rem); } .mx-4 { - margin-left: 1rem; - margin-right: 1rem; + margin-left: var(--spacing-4, 1rem); + margin-right: var(--spacing-4, 1rem); } .my-4 { - margin-top: 1rem; - margin-bottom: 1rem; + margin-top: var(--spacing-4, 1rem); + margin-bottom: var(--spacing-4, 1rem); } .ms-4 { - margin-inline-start: 1rem; + margin-inline-start: var(--spacing-4, 1rem); } .me-4 { - margin-inline-end: 1rem; + margin-inline-end: var(--spacing-4, 1rem); } .mt-4 { - margin-top: 1rem; + margin-top: var(--spacing-4, 1rem); } .mr-4 { - margin-right: 1rem; + margin-right: var(--spacing-4, 1rem); } .mb-4 { - margin-bottom: 1rem; + margin-bottom: var(--spacing-4, 1rem); } .ml-4 { - margin-left: 1rem; + margin-left: var(--spacing-4, 1rem); }" `) expect(run(['m'])).toEqual('') @@ -1540,8 +1540,8 @@ test('size', () => { } .size-4 { - width: 1rem; - height: 1rem; + width: var(--spacing-4, 1rem); + height: var(--spacing-4, 1rem); } .size-\\[4px\\] { @@ -1614,7 +1614,7 @@ test('width', () => { } .w-4 { - width: 1rem; + width: var(--spacing-4, 1rem); } .w-\\[4px\\] { @@ -1658,7 +1658,7 @@ test('width', () => { } .w-xl { - width: 36rem; + width: var(--width-xl, 36rem); }" `) expect(run(['w', '-w-4', '-w-1/2', '-w-[4px]'])).toEqual('') @@ -1692,7 +1692,7 @@ test('min-width', () => { } .min-w-4 { - min-width: 1rem; + min-width: var(--spacing-4, 1rem); } .min-w-\\[4px\\] { @@ -1720,7 +1720,7 @@ test('min-width', () => { } .min-w-xl { - min-width: 36rem; + min-width: var(--width-xl, 36rem); }" `) expect(run(['min-w', '-min-w-4', '-min-w-[4px]'])).toEqual('') @@ -1754,7 +1754,7 @@ test('max-width', () => { } .max-w-4 { - max-width: 1rem; + max-width: var(--spacing-4, 1rem); } .max-w-\\[4px\\] { @@ -1778,7 +1778,7 @@ test('max-width', () => { } .max-w-xl { - max-width: 36rem; + max-width: var(--width-xl, 36rem); }" `) expect(run(['max-w', '-max-w-4', '-max-w-[4px]'])).toEqual('') @@ -1818,7 +1818,7 @@ test('height', () => { } .h-4 { - height: 1rem; + height: var(--spacing-4, 1rem); } .h-\\[4px\\] { @@ -1893,7 +1893,7 @@ test('min-height', () => { } .min-h-4 { - min-height: 1rem; + min-height: var(--spacing-4, 1rem); } .min-h-\\[4px\\] { @@ -1968,7 +1968,7 @@ test('max-height', () => { } .max-h-4 { - max-height: 1rem; + max-height: var(--spacing-4, 1rem); } .max-h-\\[4px\\] { @@ -2116,7 +2116,7 @@ test('flex-basis', () => { } .basis-xl { - flex-basis: 36rem; + flex-basis: var(--width-xl, 36rem); }" `) expect(run(['basis', '-basis-full', '-basis-[123px]'])).toEqual('') @@ -2178,8 +2178,8 @@ test('border-spacing', () => { } .border-spacing-1 { - --tw-border-spacing-x: .25rem; - --tw-border-spacing-y: .25rem; + --tw-border-spacing-x: var(--spacing-1, .25rem); + --tw-border-spacing-y: var(--spacing-1, .25rem); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -2221,7 +2221,7 @@ test('border-spacing-x', () => { } .border-spacing-x-1 { - --tw-border-spacing-x: .25rem; + --tw-border-spacing-x: var(--spacing-1, .25rem); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -2262,7 +2262,7 @@ test('border-spacing-y', () => { } .border-spacing-y-1 { - --tw-border-spacing-y: .25rem; + --tw-border-spacing-y: var(--spacing-1, .25rem); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } @@ -2811,7 +2811,7 @@ test('cursor', () => { } .cursor-custom { - cursor: url("/my-cursor.png"); + cursor: var(--cursor-custom, url("/my-cursor.png")); } .cursor-default { @@ -3224,7 +3224,7 @@ test('scroll-m', () => { } .-scroll-m-4 { - scroll-margin: -1rem; + scroll-margin: calc(var(--spacing-4, 1rem) * -1); } .-scroll-m-\\[--value\\] { @@ -3232,7 +3232,7 @@ test('scroll-m', () => { } .scroll-m-4 { - scroll-margin: 1rem; + scroll-margin: var(--spacing-4, 1rem); } .scroll-m-\\[4px\\] { @@ -3259,8 +3259,8 @@ test('scroll-mx', () => { } .-scroll-mx-4 { - scroll-margin-left: -1rem; - scroll-margin-right: -1rem; + scroll-margin-left: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-right: calc(var(--spacing-4, 1rem) * -1); } .-scroll-mx-\\[--value\\] { @@ -3269,8 +3269,8 @@ test('scroll-mx', () => { } .scroll-mx-4 { - scroll-margin-left: 1rem; - scroll-margin-right: 1rem; + scroll-margin-left: var(--spacing-4, 1rem); + scroll-margin-right: var(--spacing-4, 1rem); } .scroll-mx-\\[4px\\] { @@ -3298,8 +3298,8 @@ test('scroll-my', () => { } .-scroll-my-4 { - scroll-margin-top: -1rem; - scroll-margin-bottom: -1rem; + scroll-margin-top: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-bottom: calc(var(--spacing-4, 1rem) * -1); } .-scroll-my-\\[--value\\] { @@ -3308,8 +3308,8 @@ test('scroll-my', () => { } .scroll-my-4 { - scroll-margin-top: 1rem; - scroll-margin-bottom: 1rem; + scroll-margin-top: var(--spacing-4, 1rem); + scroll-margin-bottom: var(--spacing-4, 1rem); } .scroll-my-\\[4px\\] { @@ -3337,7 +3337,7 @@ test('scroll-ms', () => { } .-scroll-ms-4 { - scroll-margin-inline-start: -1rem; + scroll-margin-inline-start: calc(var(--spacing-4, 1rem) * -1); } .-scroll-ms-\\[--value\\] { @@ -3345,7 +3345,7 @@ test('scroll-ms', () => { } .scroll-ms-4 { - scroll-margin-inline-start: 1rem; + scroll-margin-inline-start: var(--spacing-4, 1rem); } .scroll-ms-\\[4px\\] { @@ -3372,7 +3372,7 @@ test('scroll-me', () => { } .-scroll-me-4 { - scroll-margin-inline-end: -1rem; + scroll-margin-inline-end: calc(var(--spacing-4, 1rem) * -1); } .-scroll-me-\\[--value\\] { @@ -3380,7 +3380,7 @@ test('scroll-me', () => { } .scroll-me-4 { - scroll-margin-inline-end: 1rem; + scroll-margin-inline-end: var(--spacing-4, 1rem); } .scroll-me-\\[4px\\] { @@ -3407,7 +3407,7 @@ test('scroll-mt', () => { } .-scroll-mt-4 { - scroll-margin-top: -1rem; + scroll-margin-top: calc(var(--spacing-4, 1rem) * -1); } .-scroll-mt-\\[--value\\] { @@ -3415,7 +3415,7 @@ test('scroll-mt', () => { } .scroll-mt-4 { - scroll-margin-top: 1rem; + scroll-margin-top: var(--spacing-4, 1rem); } .scroll-mt-\\[4px\\] { @@ -3442,7 +3442,7 @@ test('scroll-mr', () => { } .-scroll-mr-4 { - scroll-margin-right: -1rem; + scroll-margin-right: calc(var(--spacing-4, 1rem) * -1); } .-scroll-mr-\\[--value\\] { @@ -3450,7 +3450,7 @@ test('scroll-mr', () => { } .scroll-mr-4 { - scroll-margin-right: 1rem; + scroll-margin-right: var(--spacing-4, 1rem); } .scroll-mr-\\[4px\\] { @@ -3477,7 +3477,7 @@ test('scroll-mb', () => { } .-scroll-mb-4 { - scroll-margin-bottom: -1rem; + scroll-margin-bottom: calc(var(--spacing-4, 1rem) * -1); } .-scroll-mb-\\[--value\\] { @@ -3485,7 +3485,7 @@ test('scroll-mb', () => { } .scroll-mb-4 { - scroll-margin-bottom: 1rem; + scroll-margin-bottom: var(--spacing-4, 1rem); } .scroll-mb-\\[4px\\] { @@ -3512,7 +3512,7 @@ test('scroll-ml', () => { } .-scroll-ml-4 { - scroll-margin-left: -1rem; + scroll-margin-left: calc(var(--spacing-4, 1rem) * -1); } .-scroll-ml-\\[--value\\] { @@ -3520,7 +3520,7 @@ test('scroll-ml', () => { } .scroll-ml-4 { - scroll-margin-left: 1rem; + scroll-margin-left: var(--spacing-4, 1rem); } .scroll-ml-\\[4px\\] { @@ -3547,7 +3547,7 @@ test('scroll-p', () => { } .-scroll-p-4 { - scroll-padding: -1rem; + scroll-padding: calc(var(--spacing-4, 1rem) * -1); } .-scroll-p-\\[--value\\] { @@ -3555,7 +3555,7 @@ test('scroll-p', () => { } .scroll-p-4 { - scroll-padding: 1rem; + scroll-padding: var(--spacing-4, 1rem); } .scroll-p-\\[4px\\] { @@ -3582,8 +3582,8 @@ test('scroll-px', () => { } .-scroll-px-4 { - scroll-padding-left: -1rem; - scroll-padding-right: -1rem; + scroll-padding-left: calc(var(--spacing-4, 1rem) * -1); + scroll-padding-right: calc(var(--spacing-4, 1rem) * -1); } .-scroll-px-\\[--value\\] { @@ -3592,8 +3592,8 @@ test('scroll-px', () => { } .scroll-px-4 { - scroll-padding-left: 1rem; - scroll-padding-right: 1rem; + scroll-padding-left: var(--spacing-4, 1rem); + scroll-padding-right: var(--spacing-4, 1rem); } .scroll-px-\\[4px\\] { @@ -3621,8 +3621,8 @@ test('scroll-py', () => { } .-scroll-py-4 { - scroll-padding-top: -1rem; - scroll-padding-bottom: -1rem; + scroll-padding-top: calc(var(--spacing-4, 1rem) * -1); + scroll-padding-bottom: calc(var(--spacing-4, 1rem) * -1); } .-scroll-py-\\[--value\\] { @@ -3631,8 +3631,8 @@ test('scroll-py', () => { } .scroll-py-4 { - scroll-padding-top: 1rem; - scroll-padding-bottom: 1rem; + scroll-padding-top: var(--spacing-4, 1rem); + scroll-padding-bottom: var(--spacing-4, 1rem); } .scroll-py-\\[4px\\] { @@ -3660,7 +3660,7 @@ test('scroll-ps', () => { } .-scroll-ps-4 { - scroll-padding-inline-start: -1rem; + scroll-padding-inline-start: calc(var(--spacing-4, 1rem) * -1); } .-scroll-ps-\\[--value\\] { @@ -3668,7 +3668,7 @@ test('scroll-ps', () => { } .scroll-ps-4 { - scroll-padding-inline-start: 1rem; + scroll-padding-inline-start: var(--spacing-4, 1rem); } .scroll-ps-\\[4px\\] { @@ -3695,7 +3695,7 @@ test('scroll-pe', () => { } .-scroll-pe-4 { - scroll-padding-inline-end: -1rem; + scroll-padding-inline-end: calc(var(--spacing-4, 1rem) * -1); } .-scroll-pe-\\[--value\\] { @@ -3703,7 +3703,7 @@ test('scroll-pe', () => { } .scroll-pe-4 { - scroll-padding-inline-end: 1rem; + scroll-padding-inline-end: var(--spacing-4, 1rem); } .scroll-pe-\\[4px\\] { @@ -3730,7 +3730,7 @@ test('scroll-pt', () => { } .-scroll-pt-4 { - scroll-padding-top: -1rem; + scroll-padding-top: calc(var(--spacing-4, 1rem) * -1); } .-scroll-pt-\\[--value\\] { @@ -3738,7 +3738,7 @@ test('scroll-pt', () => { } .scroll-pt-4 { - scroll-padding-top: 1rem; + scroll-padding-top: var(--spacing-4, 1rem); } .scroll-pt-\\[4px\\] { @@ -3765,7 +3765,7 @@ test('scroll-pr', () => { } .-scroll-pr-4 { - scroll-padding-right: -1rem; + scroll-padding-right: calc(var(--spacing-4, 1rem) * -1); } .-scroll-pr-\\[--value\\] { @@ -3773,7 +3773,7 @@ test('scroll-pr', () => { } .scroll-pr-4 { - scroll-padding-right: 1rem; + scroll-padding-right: var(--spacing-4, 1rem); } .scroll-pr-\\[4px\\] { @@ -3800,7 +3800,7 @@ test('scroll-pb', () => { } .-scroll-pb-4 { - scroll-padding-bottom: -1rem; + scroll-padding-bottom: calc(var(--spacing-4, 1rem) * -1); } .-scroll-pb-\\[--value\\] { @@ -3808,7 +3808,7 @@ test('scroll-pb', () => { } .scroll-pb-4 { - scroll-padding-bottom: 1rem; + scroll-padding-bottom: var(--spacing-4, 1rem); } .scroll-pb-\\[4px\\] { @@ -3835,7 +3835,7 @@ test('scroll-pl', () => { } .-scroll-pl-4 { - scroll-padding-left: -1rem; + scroll-padding-left: calc(var(--spacing-4, 1rem) * -1); } .-scroll-pl-\\[--value\\] { @@ -3843,7 +3843,7 @@ test('scroll-pl', () => { } .scroll-pl-4 { - scroll-padding-left: 1rem; + scroll-padding-left: var(--spacing-4, 1rem); } .scroll-pl-\\[4px\\] { @@ -3940,7 +3940,7 @@ test('columns', () => { } .columns-3xs { - columns: 16rem; + columns: var(--width-3xs, 16rem); } .columns-4 { @@ -3948,7 +3948,7 @@ test('columns', () => { } .columns-7xl { - columns: 80rem; + columns: var(--width-7xl, 80rem); } .columns-99 { @@ -4647,7 +4647,7 @@ test('gap', () => { } .gap-4 { - gap: 1rem; + gap: var(--spacing-4, 1rem); } .gap-\\[4px\\] { @@ -4674,7 +4674,7 @@ test('gap-x', () => { } .gap-x-4 { - column-gap: 1rem; + column-gap: var(--spacing-4, 1rem); } .gap-x-\\[4px\\] { @@ -4701,7 +4701,7 @@ test('gap-y', () => { } .gap-y-4 { - row-gap: 1rem; + row-gap: var(--spacing-4, 1rem); } .gap-y-\\[4px\\] { @@ -4728,13 +4728,13 @@ test('space-x', () => { } :where(.-space-x-4 > :not([hidden]) ~ :not([hidden])) { - margin-inline-start: calc(calc(1rem * -1) * calc(1 - var(--tw-space-x-reverse))); - margin-inline-end: calc(calc(1rem * -1) * var(--tw-space-x-reverse)); + margin-inline-start: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-x-reverse))); + margin-inline-end: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-x-reverse)); } :where(.space-x-4 > :not([hidden]) ~ :not([hidden])) { - margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse))); - margin-inline-end: calc(1rem * var(--tw-space-x-reverse)); + margin-inline-start: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-x-reverse))); + margin-inline-end: calc(var(--spacing-4, 1rem) * var(--tw-space-x-reverse)); } :where(.space-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { @@ -4768,13 +4768,13 @@ test('space-y', () => { } :where(.-space-y-4 > :not([hidden]) ~ :not([hidden])) { - margin-bottom: calc(calc(1rem * -1) * var(--tw-space-y-reverse)); - margin-top: calc(calc(1rem * -1) * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-y-reverse)); + margin-top: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-4 > :not([hidden]) ~ :not([hidden])) { - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(var(--spacing-4, 1rem) * var(--tw-space-y-reverse)); + margin-top: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) { @@ -5111,11 +5111,11 @@ test('accent', () => { } .accent-red-500 { - accent-color: #ef4444; + accent-color: var(--color-red-500, #ef4444); } .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] { - accent-color: #ef444480; + accent-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .accent-transparent { @@ -5189,11 +5189,11 @@ test('caret', () => { } .caret-red-500 { - caret-color: #ef4444; + caret-color: var(--color-red-500, #ef4444); } .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] { - caret-color: #ef444480; + caret-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .caret-transparent { @@ -5283,19 +5283,19 @@ test('divide-color', () => { } :where(.divide-red-500 > :not([hidden]) ~ :not([hidden])) { - border-color: #ef4444; + border-color: var(--color-red-500, #ef4444); } :where(.divide-red-500\\/50 > :not([hidden]) ~ :not([hidden])) { - border-color: #ef444480; + border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } :where(.divide-red-500\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) { - border-color: #ef444480; + border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } :where(.divide-red-500\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) { - border-color: #ef444480; + border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } :where(.divide-transparent > :not([hidden]) ~ :not([hidden])) { @@ -5817,7 +5817,7 @@ test('rounded', () => { } .rounded-sm { - border-radius: .125rem; + border-radius: var(--radius-sm, .125rem); }" `) expect( @@ -5868,8 +5868,8 @@ test('rounded-s', () => { } .rounded-s-sm { - border-start-start-radius: .125rem; - border-end-start-radius: .125rem; + border-start-start-radius: var(--radius-sm, .125rem); + border-end-start-radius: var(--radius-sm, .125rem); }" `) expect( @@ -5920,8 +5920,8 @@ test('rounded-e', () => { } .rounded-e-sm { - border-start-end-radius: .125rem; - border-end-end-radius: .125rem; + border-start-end-radius: var(--radius-sm, .125rem); + border-end-end-radius: var(--radius-sm, .125rem); }" `) expect( @@ -5972,8 +5972,8 @@ test('rounded-t', () => { } .rounded-t-sm { - border-top-left-radius: .125rem; - border-top-right-radius: .125rem; + border-top-left-radius: var(--radius-sm, .125rem); + border-top-right-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6024,8 +6024,8 @@ test('rounded-r', () => { } .rounded-r-sm { - border-top-right-radius: .125rem; - border-bottom-right-radius: .125rem; + border-top-right-radius: var(--radius-sm, .125rem); + border-bottom-right-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6076,8 +6076,8 @@ test('rounded-b', () => { } .rounded-b-sm { - border-bottom-right-radius: .125rem; - border-bottom-left-radius: .125rem; + border-bottom-right-radius: var(--radius-sm, .125rem); + border-bottom-left-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6128,8 +6128,8 @@ test('rounded-l', () => { } .rounded-l-sm { - border-top-left-radius: .125rem; - border-bottom-left-radius: .125rem; + border-top-left-radius: var(--radius-sm, .125rem); + border-bottom-left-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6176,7 +6176,7 @@ test('rounded-ss', () => { } .rounded-ss-sm { - border-start-start-radius: .125rem; + border-start-start-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6229,7 +6229,7 @@ test('rounded-se', () => { } .rounded-se-sm { - border-start-end-radius: .125rem; + border-start-end-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6282,7 +6282,7 @@ test('rounded-ee', () => { } .rounded-ee-sm { - border-end-end-radius: .125rem; + border-end-end-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6335,7 +6335,7 @@ test('rounded-es', () => { } .rounded-es-sm { - border-end-start-radius: .125rem; + border-end-start-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6388,7 +6388,7 @@ test('rounded-tl', () => { } .rounded-tl-sm { - border-top-left-radius: .125rem; + border-top-left-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6441,7 +6441,7 @@ test('rounded-tr', () => { } .rounded-tr-sm { - border-top-right-radius: .125rem; + border-top-right-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6494,7 +6494,7 @@ test('rounded-br', () => { } .rounded-br-sm { - border-bottom-right-radius: .125rem; + border-bottom-right-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6547,7 +6547,7 @@ test('rounded-bl', () => { } .rounded-bl-sm { - border-bottom-left-radius: .125rem; + border-bottom-left-radius: var(--radius-sm, .125rem); }" `) expect( @@ -6838,11 +6838,11 @@ test('bg', () => { } .bg-red-500 { - background-color: #ef4444; + background-color: var(--color-red-500, #ef4444); } .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] { - background-color: #ef444480; + background-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .bg-transparent { @@ -7080,11 +7080,11 @@ test('bg', () => { } .bg-current\\/custom { - background-color: color-mix(in srgb, currentColor var(--custom-opacity), transparent); + background-color: color-mix(in srgb, currentColor var(--opacity-custom, var(--custom-opacity)), transparent); } .bg-current\\/half { - background-color: color-mix(in srgb, currentColor 50%, transparent); + background-color: color-mix(in srgb, currentColor var(--opacity-half, .5), transparent); }" `) }) @@ -7178,12 +7178,12 @@ test('from', () => { } .from-red-500 { - --tw-gradient-from: #ef4444; + --tw-gradient-from: var(--color-red-500, #ef4444); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] { - --tw-gradient-from: #ef444480; + --tw-gradient-from: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -7387,13 +7387,13 @@ test('via', () => { } .via-red-500 { - --tw-gradient-via: #ef4444; + --tw-gradient-via: var(--color-red-500, #ef4444); --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] { - --tw-gradient-via: #ef444480; + --tw-gradient-via: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } @@ -7589,12 +7589,12 @@ test('to', () => { } .to-red-500 { - --tw-gradient-to: #ef4444; + --tw-gradient-to: var(--color-red-500, #ef4444); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] { - --tw-gradient-to: #ef444480; + --tw-gradient-to: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } @@ -8034,11 +8034,11 @@ test('fill', () => { } .fill-red-500 { - fill: #ef4444; + fill: var(--color-red-500, #ef4444); } .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] { - fill: #ef444480; + fill: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .fill-transparent { @@ -8153,11 +8153,11 @@ test('stroke', () => { } .stroke-red-500 { - stroke: #ef4444; + stroke: var(--color-red-500, #ef4444); } .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] { - stroke: #ef444480; + stroke: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .stroke-transparent { @@ -8333,7 +8333,7 @@ test('p', () => { } .p-4 { - padding: 1rem; + padding: var(--spacing-4, 1rem); } .p-\\[4px\\] { @@ -8360,8 +8360,8 @@ test('px', () => { } .px-4 { - padding-left: 1rem; - padding-right: 1rem; + padding-left: var(--spacing-4, 1rem); + padding-right: var(--spacing-4, 1rem); } .px-\\[4px\\] { @@ -8389,8 +8389,8 @@ test('py', () => { } .py-4 { - padding-top: 1rem; - padding-bottom: 1rem; + padding-top: var(--spacing-4, 1rem); + padding-bottom: var(--spacing-4, 1rem); } .py-\\[4px\\] { @@ -8418,7 +8418,7 @@ test('pt', () => { } .pt-4 { - padding-top: 1rem; + padding-top: var(--spacing-4, 1rem); } .pt-\\[4px\\] { @@ -8445,7 +8445,7 @@ test('ps', () => { } .ps-4 { - padding-inline-start: 1rem; + padding-inline-start: var(--spacing-4, 1rem); } .ps-\\[4px\\] { @@ -8472,7 +8472,7 @@ test('pe', () => { } .pe-4 { - padding-inline-end: 1rem; + padding-inline-end: var(--spacing-4, 1rem); } .pe-\\[4px\\] { @@ -8499,7 +8499,7 @@ test('pr', () => { } .pr-4 { - padding-right: 1rem; + padding-right: var(--spacing-4, 1rem); } .pr-\\[4px\\] { @@ -8526,7 +8526,7 @@ test('pb', () => { } .pb-4 { - padding-bottom: 1rem; + padding-bottom: var(--spacing-4, 1rem); } .pb-\\[4px\\] { @@ -8553,7 +8553,7 @@ test('pl', () => { } .pl-4 { - padding-left: 1rem; + padding-left: var(--spacing-4, 1rem); } .pl-\\[4px\\] { @@ -8719,7 +8719,7 @@ test('font', () => { } .font-sans { - font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + font-family: var(--font-family-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); } .font-\\[--my-family\\] { @@ -8894,19 +8894,19 @@ test('placeholder', () => { } .placeholder-red-500::placeholder { - color: #ef4444; + color: var(--color-red-500, #ef4444); } .placeholder-red-500\\/50::placeholder { - color: #ef444480; + color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .placeholder-red-500\\/\\[0\\.5\\]::placeholder { - color: #ef444480; + color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .placeholder-red-500\\/\\[50\\%\\]::placeholder { - color: #ef444480; + color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .placeholder-transparent::placeholder { @@ -9030,11 +9030,13 @@ test('decoration', () => { } .decoration-red-500 { - text-decoration-color: #ef4444; + -webkit-text-decoration-color: var(--color-red-500, #ef4444); + text-decoration-color: var(--color-red-500, #ef4444); } .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] { - text-decoration-color: #ef444480; + -webkit-text-decoration-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); + text-decoration-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .decoration-transparent { @@ -9163,7 +9165,7 @@ test('animate', () => { } .animate-spin { - animation: 1s linear infinite spin; + animation: var(--animate-spin, spin 1s linear infinite); }" `) expect( @@ -9230,7 +9232,7 @@ test('filter', () => { } .blur-xl { - --tw-blur: blur(24px); + --tw-blur: blur(var(--blur-xl, 24px)); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } @@ -9250,7 +9252,7 @@ test('filter', () => { } .drop-shadow-xl { - --tw-drop-shadow: drop-shadow(0 20px 13px #00000008) drop-shadow(0 8px 5px #00000014); + --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl, 0 20px 13px #00000008, 0 8px 5px #00000014)); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } @@ -9479,7 +9481,7 @@ test('backdrop-filter', () => { } .backdrop-blur-xl { - --tw-backdrop-blur: blur(24px); + --tw-backdrop-blur: blur(var(--blur-xl, 24px)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } @@ -9850,11 +9852,11 @@ test('ease', () => { } .ease-in { - transition-timing-function: cubic-bezier(.4, 0, 1, 1); + transition-timing-function: var(--transition-timing-function-in, cubic-bezier(.4, 0, 1, 1)); } .ease-out { - transition-timing-function: cubic-bezier(0, 0, .2, 1); + transition-timing-function: var(--transition-timing-function-out, cubic-bezier(0, 0, .2, 1)); }" `) expect(run(['-ease-in', '-ease-out', '-ease-[--value]'])).toEqual('') @@ -10035,7 +10037,7 @@ test('leading', () => { } .leading-6 { - line-height: 1.5rem; + line-height: var(--line-height-6, 1.5rem); } .leading-\\[--value\\] { @@ -10043,7 +10045,7 @@ test('leading', () => { } .leading-none { - line-height: 1; + line-height: var(--line-height-none, 1); }" `) expect(run(['leading', '-leading-none', '-leading-6', '-leading-[--value]'])).toEqual('') @@ -10076,11 +10078,11 @@ test('tracking', () => { } .tracking-normal { - letter-spacing: 0; + letter-spacing: var(--letter-spacing-normal, 0em); } .tracking-wide { - letter-spacing: .025em; + letter-spacing: var(--letter-spacing-wide, .025em); }" `) expect(run(['tracking'])).toEqual('') @@ -10336,11 +10338,11 @@ test('outline', () => { } .outline-red-500 { - outline-color: #ef4444; + outline-color: var(--color-red-500, #ef4444); } .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] { - outline-color: #ef444480; + outline-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .outline-transparent { @@ -10565,42 +10567,42 @@ test('text', () => { } .text-sm { - font-size: .875rem; - line-height: 1.25rem; + font-size: var(--font-size-sm, .875rem); + line-height: var(--font-size-sm--line-height, 1.25rem); } .text-\\[12px\\]\\/6 { font-size: 12px; - line-height: 1.5rem; + line-height: var(--line-height-6, 1.5rem); } .text-\\[50\\%\\]\\/6 { font-size: 50%; - line-height: 1.5rem; + line-height: var(--line-height-6, 1.5rem); } .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 { font-size: clamp(1rem, var(--size), 3rem); - line-height: 2.25rem; + line-height: var(--line-height-9, 2.25rem); } .text-\\[larger\\]\\/6 { font-size: larger; - line-height: 1.5rem; + line-height: var(--line-height-6, 1.5rem); } .text-\\[xx-large\\]\\/6 { font-size: xx-large; - line-height: 1.5rem; + line-height: var(--line-height-6, 1.5rem); } .text-sm\\/6 { - font-size: .875rem; - line-height: 1.5rem; + font-size: var(--font-size-sm, .875rem); + line-height: var(--line-height-6, 1.5rem); } .text-sm\\/\\[4px\\] { - font-size: .875rem; + font-size: var(--font-size-sm, .875rem); line-height: 4px; } @@ -10669,11 +10671,11 @@ test('text', () => { } .text-red-500 { - color: #ef4444; + color: var(--color-red-500, #ef4444); } .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] { - color: #ef444480; + color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .text-transparent { @@ -10791,8 +10793,8 @@ test('shadow', () => { } .shadow-xl { - --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + --tw-shadow: var(--shadow-xl, 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a); + --tw-shadow-colored: var(--shadow-xl, 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } @@ -10827,12 +10829,12 @@ test('shadow', () => { } .shadow-red-500 { - --tw-shadow-color: #ef4444; + --tw-shadow-color: var(--color-red-500, #ef4444); --tw-shadow: var(--tw-shadow-colored); } .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] { - --tw-shadow-color: #ef444480; + --tw-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); --tw-shadow: var(--tw-shadow-colored); } @@ -11017,8 +11019,8 @@ test('inset-shadow', () => { } .inset-shadow-sm { - --tw-inset-shadow: inset 0 1px 1px #0000000d; - --tw-inset-shadow-colored: inset 0 1px 1px var(--tw-inset-shadow-color); + --tw-inset-shadow: var(--inset-shadow-sm, inset 0 1px 1px #0000000d); + --tw-inset-shadow-colored: var(--inset-shadow-sm, inset 0 1px 1px #0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } @@ -11053,12 +11055,12 @@ test('inset-shadow', () => { } .inset-shadow-red-500 { - --tw-inset-shadow-color: #ef4444; + --tw-inset-shadow-color: var(--color-red-500, #ef4444); --tw-inset-shadow: var(--tw-inset-shadow-colored); } .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] { - --tw-inset-shadow-color: #ef444480; + --tw-inset-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); --tw-inset-shadow: var(--tw-inset-shadow-colored); } @@ -11275,11 +11277,11 @@ test('ring', () => { } .ring-red-500 { - --tw-ring-color: #ef4444; + --tw-ring-color: var(--color-red-500, #ef4444); } .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] { - --tw-ring-color: #ef444480; + --tw-ring-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .ring-transparent { @@ -11503,11 +11505,11 @@ test('inset-ring', () => { } .inset-ring-red-500 { - --tw-inset-ring-color: #ef4444; + --tw-inset-ring-color: var(--color-red-500, #ef4444); } .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] { - --tw-inset-ring-color: #ef444480; + --tw-inset-ring-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .inset-ring-transparent { @@ -11722,11 +11724,11 @@ test('ring-offset', () => { } .ring-offset-red-500 { - --tw-ring-offset-color: #ef4444; + --tw-ring-offset-color: var(--color-red-500, #ef4444); } .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] { - --tw-ring-offset-color: #ef444480; + --tw-ring-offset-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent); } .ring-offset-transparent { diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 3cc0919ad..1677f12e6 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/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 From b2586d4efa9536a6bd33cdd54424aa9967c67a6f Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Sun, 10 Mar 2024 10:24:02 -0400 Subject: [PATCH 2/3] Update playwright test --- packages/tailwindcss/tests/ui.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts index f16736f66..ab81307fa 100644 --- a/packages/tailwindcss/tests/ui.spec.ts +++ b/packages/tailwindcss/tests/ui.spec.ts @@ -144,7 +144,7 @@ test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) => page, html`
`, ) From 29719b1aa301cfba19b0ce538fd73705ac2530ac Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Mon, 11 Mar 2024 15:24:39 -0400 Subject: [PATCH 3/3] Prepare for internal release --- oxide/crates/node/npm/android-arm-eabi/package.json | 2 +- oxide/crates/node/npm/android-arm64/package.json | 2 +- oxide/crates/node/npm/darwin-arm64/package.json | 2 +- oxide/crates/node/npm/darwin-x64/package.json | 2 +- oxide/crates/node/npm/freebsd-x64/package.json | 2 +- oxide/crates/node/npm/linux-arm-gnueabihf/package.json | 2 +- oxide/crates/node/npm/linux-arm64-gnu/package.json | 2 +- oxide/crates/node/npm/linux-arm64-musl/package.json | 2 +- oxide/crates/node/npm/linux-x64-gnu/package.json | 2 +- oxide/crates/node/npm/linux-x64-musl/package.json | 2 +- oxide/crates/node/npm/win32-x64-msvc/package.json | 2 +- oxide/crates/node/package.json | 2 +- packages/@tailwindcss-cli/package.json | 2 +- packages/@tailwindcss-postcss/package.json | 2 +- packages/@tailwindcss-vite/package.json | 2 +- packages/tailwindcss/package.json | 2 +- 16 files changed, 16 insertions(+), 16 deletions(-) diff --git a/oxide/crates/node/npm/android-arm-eabi/package.json b/oxide/crates/node/npm/android-arm-eabi/package.json index 0eed41505..1425e7d60 100644 --- a/oxide/crates/node/npm/android-arm-eabi/package.json +++ b/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", diff --git a/oxide/crates/node/npm/android-arm64/package.json b/oxide/crates/node/npm/android-arm64/package.json index 57d7fdadc..ade255977 100644 --- a/oxide/crates/node/npm/android-arm64/package.json +++ b/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", diff --git a/oxide/crates/node/npm/darwin-arm64/package.json b/oxide/crates/node/npm/darwin-arm64/package.json index aa0f0e2b4..a6a345b22 100644 --- a/oxide/crates/node/npm/darwin-arm64/package.json +++ b/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", diff --git a/oxide/crates/node/npm/darwin-x64/package.json b/oxide/crates/node/npm/darwin-x64/package.json index de125800a..5a25439f9 100644 --- a/oxide/crates/node/npm/darwin-x64/package.json +++ b/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", diff --git a/oxide/crates/node/npm/freebsd-x64/package.json b/oxide/crates/node/npm/freebsd-x64/package.json index 9daf90a71..128e4bf65 100644 --- a/oxide/crates/node/npm/freebsd-x64/package.json +++ b/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", diff --git a/oxide/crates/node/npm/linux-arm-gnueabihf/package.json b/oxide/crates/node/npm/linux-arm-gnueabihf/package.json index dcbb38adb..ece8844f0 100644 --- a/oxide/crates/node/npm/linux-arm-gnueabihf/package.json +++ b/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", diff --git a/oxide/crates/node/npm/linux-arm64-gnu/package.json b/oxide/crates/node/npm/linux-arm64-gnu/package.json index 5ed38db0c..35c21489e 100644 --- a/oxide/crates/node/npm/linux-arm64-gnu/package.json +++ b/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", diff --git a/oxide/crates/node/npm/linux-arm64-musl/package.json b/oxide/crates/node/npm/linux-arm64-musl/package.json index 7a2009d76..3d4f5db19 100644 --- a/oxide/crates/node/npm/linux-arm64-musl/package.json +++ b/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", diff --git a/oxide/crates/node/npm/linux-x64-gnu/package.json b/oxide/crates/node/npm/linux-x64-gnu/package.json index 0108a8af3..d43c47f7b 100644 --- a/oxide/crates/node/npm/linux-x64-gnu/package.json +++ b/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", diff --git a/oxide/crates/node/npm/linux-x64-musl/package.json b/oxide/crates/node/npm/linux-x64-musl/package.json index cf23c6989..4767c03e3 100644 --- a/oxide/crates/node/npm/linux-x64-musl/package.json +++ b/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", diff --git a/oxide/crates/node/npm/win32-x64-msvc/package.json b/oxide/crates/node/npm/win32-x64-msvc/package.json index 7e40a455e..36e9e4157 100644 --- a/oxide/crates/node/npm/win32-x64-msvc/package.json +++ b/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", diff --git a/oxide/crates/node/package.json b/oxide/crates/node/package.json index a650cd1d6..ddfcb6134 100644 --- a/oxide/crates/node/package.json +++ b/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", diff --git a/packages/@tailwindcss-cli/package.json b/packages/@tailwindcss-cli/package.json index 58b2439dd..5907d2bfc 100644 --- a/packages/@tailwindcss-cli/package.json +++ b/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": { diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json index e8b3c7d0b..265f83767 100644 --- a/packages/@tailwindcss-postcss/package.json +++ b/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": { diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json index 1558b8b99..c4634cdda 100644 --- a/packages/@tailwindcss-vite/package.json +++ b/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": { diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json index 68529f0b8..59556e921 100644 --- a/packages/tailwindcss/package.json +++ b/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",