diff --git a/CHANGELOG.md b/CHANGELOG.md index 6d134d47604c..3d9ad019d773 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Support derived spacing scales based on a single `--spacing` theme value ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) +- Add `svh`, `dvh`, `svw`, `dvw`, and `auto` values to all width/height/size utilities ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) - _Upgrade (experimental)_: Migrate `grid-cols-[subgrid]` and `grid-rows-[subgrid]` to `grid-cols-subgrid` and `grid-rows-subgrid` ([#14840](https://github.com/tailwindlabs/tailwindcss/pull/14840)) - _Upgrade (experimental)_: Support migrating projects with multiple config files ([#14863](https://github.com/tailwindlabs/tailwindcss/pull/14863)) @@ -29,7 +31,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Rename `drop-shadow` to `drop-shadow-sm` and `drop-shadow-sm` to `drop-shadow-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) - Rename `rounded` to `rounded-sm` and `rounded-sm` to `rounded-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) - Rename `blur` to `blur-sm` and `blur-sm` to `blur-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) +- Remove fixed line-height theme values and derive `leading-*` utilites from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) - Remove `--transition-timing-function-linear` from the default theme in favor of a static `ease-linear` utility ([#14880](https://github.com/tailwindlabs/tailwindcss/pull/14880)) +- Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) ## [4.0.0-alpha.31] - 2024-10-29 diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts index cf7de5b8c826..cbc59951370f 100644 --- a/integrations/upgrade/index.test.ts +++ b/integrations/upgrade/index.test.ts @@ -69,7 +69,7 @@ test( 'src/index.html': html`

🤠👋

`, 'src/input.css': css` @@ -93,7 +93,7 @@ test( --- ./src/index.html ---

🤠👋

--- ./src/input.css --- @@ -154,7 +154,7 @@ test( candidate`bg-linear-to-t`, candidate`bg-[var(--my-red)]`, candidate`max-w-[var(--breakpoint-md)]`, - candidate`ml-[var(--spacing-1\_5)`, + candidate`ml-[var(--breakpoint-md)`, ]) }, ) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index fda65872ba5d..ff79528e0854 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -296,41 +296,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a; --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014; --drop-shadow-2xl: 0 25px 25px #00000026; - --spacing-px: 1px; - --spacing-0: 0px; - --spacing-0_5: .125rem; - --spacing-1: .25rem; - --spacing-1_5: .375rem; - --spacing-2: .5rem; - --spacing-2_5: .625rem; - --spacing-3: .75rem; - --spacing-3_5: .875rem; - --spacing-4: 1rem; - --spacing-5: 1.25rem; - --spacing-6: 1.5rem; - --spacing-7: 1.75rem; - --spacing-8: 2rem; - --spacing-9: 2.25rem; - --spacing-10: 2.5rem; - --spacing-11: 2.75rem; - --spacing-12: 3rem; - --spacing-14: 3.5rem; - --spacing-16: 4rem; - --spacing-20: 5rem; - --spacing-24: 6rem; - --spacing-28: 7rem; - --spacing-32: 8rem; - --spacing-36: 9rem; - --spacing-40: 10rem; - --spacing-44: 11rem; - --spacing-48: 12rem; - --spacing-52: 13rem; - --spacing-56: 14rem; - --spacing-60: 15rem; - --spacing-64: 16rem; - --spacing-72: 18rem; - --spacing-80: 20rem; - --spacing-96: 24rem; + --spacing: .25rem; --width-3xs: 16rem; --width-2xs: 18rem; --width-xs: 20rem; @@ -386,14 +352,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; - --line-height-3: .75rem; - --line-height-4: 1rem; - --line-height-5: 1.25rem; - --line-height-6: 1.5rem; - --line-height-7: 1.75rem; - --line-height-8: 2rem; - --line-height-9: 2.25rem; - --line-height-10: 2.5rem; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-theme-to-var.test.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-theme-to-var.test.ts index ce102e1f636d..2bd35ce8e8b7 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/migrate-theme-to-var.test.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-theme-to-var.test.ts @@ -24,7 +24,7 @@ async function migrate(input: string) { it('should migrate `theme(…)` to `var(…)`', async () => { expect( await migrate(css` - @media theme(spacing.4) { + @media theme(screens.sm) { .foo { background-color: theme(colors.red.900); color: theme(colors.red.900 / 75%); @@ -33,7 +33,7 @@ it('should migrate `theme(…)` to `var(…)`', async () => { } `), ).toMatchInlineSnapshot(` - "@media theme(--spacing-4) { + "@media theme(--breakpoint-sm) { .foo { background-color: var(--color-red-900); color: theme(--color-red-900 / 75%); diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts index e82b769592ff..273ef8e9c9c5 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts +++ b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts @@ -2,6 +2,8 @@ import { __unstable__loadDesignSystem } from '@tailwindcss/node' import { expect, test } from 'vitest' import { themeToVar } from './theme-to-var' +let css = String.raw + test.each([ // Keep candidates that don't contain `theme(…)` or `theme(…, …)` ['[color:red]', '[color:red]'], @@ -107,9 +109,51 @@ test.each([ '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]/50', ], ])('%s => %s', async (candidate, result) => { - let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', { - base: __dirname, - }) + let designSystem = await __unstable__loadDesignSystem( + css` + @import 'tailwindcss'; + @theme { + --spacing-px: 1px; + --spacing-0: 0px; + --spacing-0_5: 0.125rem; + --spacing-1: 0.25rem; + --spacing-1_5: 0.375rem; + --spacing-2: 0.5rem; + --spacing-2_5: 0.625rem; + --spacing-3: 0.75rem; + --spacing-3_5: 0.875rem; + --spacing-4: 1rem; + --spacing-5: 1.25rem; + --spacing-6: 1.5rem; + --spacing-7: 1.75rem; + --spacing-8: 2rem; + --spacing-9: 2.25rem; + --spacing-10: 2.5rem; + --spacing-11: 2.75rem; + --spacing-12: 3rem; + --spacing-14: 3.5rem; + --spacing-16: 4rem; + --spacing-20: 5rem; + --spacing-24: 6rem; + --spacing-28: 7rem; + --spacing-32: 8rem; + --spacing-36: 9rem; + --spacing-40: 10rem; + --spacing-44: 11rem; + --spacing-48: 12rem; + --spacing-52: 13rem; + --spacing-56: 14rem; + --spacing-60: 15rem; + --spacing-64: 16rem; + --spacing-72: 18rem; + --spacing-80: 20rem; + --spacing-96: 24rem; + } + `, + { + base: __dirname, + }, + ) expect(themeToVar(designSystem, {}, candidate)).toEqual(result) }) diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index bfec61c9f061..eac45460c0c4 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -295,41 +295,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a; --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014; --drop-shadow-2xl: 0 25px 25px #00000026; - --spacing-px: 1px; - --spacing-0: 0px; - --spacing-0_5: .125rem; - --spacing-1: .25rem; - --spacing-1_5: .375rem; - --spacing-2: .5rem; - --spacing-2_5: .625rem; - --spacing-3: .75rem; - --spacing-3_5: .875rem; - --spacing-4: 1rem; - --spacing-5: 1.25rem; - --spacing-6: 1.5rem; - --spacing-7: 1.75rem; - --spacing-8: 2rem; - --spacing-9: 2.25rem; - --spacing-10: 2.5rem; - --spacing-11: 2.75rem; - --spacing-12: 3rem; - --spacing-14: 3.5rem; - --spacing-16: 4rem; - --spacing-20: 5rem; - --spacing-24: 6rem; - --spacing-28: 7rem; - --spacing-32: 8rem; - --spacing-36: 9rem; - --spacing-40: 10rem; - --spacing-44: 11rem; - --spacing-48: 12rem; - --spacing-52: 13rem; - --spacing-56: 14rem; - --spacing-60: 15rem; - --spacing-64: 16rem; - --spacing-72: 18rem; - --spacing-80: 20rem; - --spacing-96: 24rem; + --spacing: .25rem; --width-3xs: 16rem; --width-2xs: 18rem; --width-xs: 20rem; @@ -385,14 +351,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; - --line-height-3: .75rem; - --line-height-4: 1rem; - --line-height-5: 1.25rem; - --line-height-6: 1.5rem; - --line-height-7: 1.75rem; - --line-height-8: 2rem; - --line-height-9: 2.25rem; - --line-height-10: 2.5rem; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; @@ -404,7 +362,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using } .w-4 { - width: var(--spacing-4, 1rem); + width: calc(var(--spacing, .25rem) * 4); } .bg-red-500 { diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 8a22cafe1881..4a54ff5ee412 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -2,10 +2,40 @@ exports[`getClassList 1`] = ` [ + "-bottom-0", "-bottom-0.5", "-bottom-1", + "-bottom-1.5", + "-bottom-10", + "-bottom-11", + "-bottom-12", + "-bottom-14", + "-bottom-16", + "-bottom-2", + "-bottom-2.5", + "-bottom-20", + "-bottom-24", + "-bottom-28", "-bottom-3", + "-bottom-3.5", + "-bottom-32", + "-bottom-36", "-bottom-4", + "-bottom-40", + "-bottom-44", + "-bottom-48", + "-bottom-5", + "-bottom-52", + "-bottom-56", + "-bottom-6", + "-bottom-60", + "-bottom-64", + "-bottom-7", + "-bottom-72", + "-bottom-8", + "-bottom-80", + "-bottom-9", + "-bottom-96", "-col-end-1", "-col-end-10", "-col-end-11", @@ -32,66 +62,516 @@ exports[`getClassList 1`] = ` "-col-start-7", "-col-start-8", "-col-start-9", + "-end-0", "-end-0.5", "-end-1", + "-end-1.5", + "-end-10", + "-end-11", + "-end-12", + "-end-14", + "-end-16", + "-end-2", + "-end-2.5", + "-end-20", + "-end-24", + "-end-28", "-end-3", + "-end-3.5", + "-end-32", + "-end-36", "-end-4", + "-end-40", + "-end-44", + "-end-48", + "-end-5", + "-end-52", + "-end-56", + "-end-6", + "-end-60", + "-end-64", + "-end-7", + "-end-72", + "-end-8", + "-end-80", + "-end-9", + "-end-96", + "-indent-0", "-indent-0.5", "-indent-1", + "-indent-1.5", + "-indent-10", + "-indent-11", + "-indent-12", + "-indent-14", + "-indent-16", + "-indent-2", + "-indent-2.5", + "-indent-20", + "-indent-24", + "-indent-28", "-indent-3", + "-indent-3.5", + "-indent-32", + "-indent-36", "-indent-4", + "-indent-40", + "-indent-44", + "-indent-48", + "-indent-5", + "-indent-52", + "-indent-56", + "-indent-6", + "-indent-60", + "-indent-64", + "-indent-7", + "-indent-72", + "-indent-8", + "-indent-80", + "-indent-9", + "-indent-96", + "-inset-0", "-inset-0.5", "-inset-1", + "-inset-1.5", + "-inset-10", + "-inset-11", + "-inset-12", + "-inset-14", + "-inset-16", + "-inset-2", + "-inset-2.5", + "-inset-20", + "-inset-24", + "-inset-28", "-inset-3", + "-inset-3.5", + "-inset-32", + "-inset-36", "-inset-4", + "-inset-40", + "-inset-44", + "-inset-48", + "-inset-5", + "-inset-52", + "-inset-56", + "-inset-6", + "-inset-60", + "-inset-64", + "-inset-7", + "-inset-72", + "-inset-8", + "-inset-80", + "-inset-9", + "-inset-96", + "-inset-x-0", "-inset-x-0.5", "-inset-x-1", + "-inset-x-1.5", + "-inset-x-10", + "-inset-x-11", + "-inset-x-12", + "-inset-x-14", + "-inset-x-16", + "-inset-x-2", + "-inset-x-2.5", + "-inset-x-20", + "-inset-x-24", + "-inset-x-28", "-inset-x-3", + "-inset-x-3.5", + "-inset-x-32", + "-inset-x-36", "-inset-x-4", + "-inset-x-40", + "-inset-x-44", + "-inset-x-48", + "-inset-x-5", + "-inset-x-52", + "-inset-x-56", + "-inset-x-6", + "-inset-x-60", + "-inset-x-64", + "-inset-x-7", + "-inset-x-72", + "-inset-x-8", + "-inset-x-80", + "-inset-x-9", + "-inset-x-96", + "-inset-y-0", "-inset-y-0.5", "-inset-y-1", + "-inset-y-1.5", + "-inset-y-10", + "-inset-y-11", + "-inset-y-12", + "-inset-y-14", + "-inset-y-16", + "-inset-y-2", + "-inset-y-2.5", + "-inset-y-20", + "-inset-y-24", + "-inset-y-28", "-inset-y-3", + "-inset-y-3.5", + "-inset-y-32", + "-inset-y-36", "-inset-y-4", + "-inset-y-40", + "-inset-y-44", + "-inset-y-48", + "-inset-y-5", + "-inset-y-52", + "-inset-y-56", + "-inset-y-6", + "-inset-y-60", + "-inset-y-64", + "-inset-y-7", + "-inset-y-72", + "-inset-y-8", + "-inset-y-80", + "-inset-y-9", + "-inset-y-96", + "-left-0", "-left-0.5", "-left-1", + "-left-1.5", + "-left-10", + "-left-11", + "-left-12", + "-left-14", + "-left-16", + "-left-2", + "-left-2.5", + "-left-20", + "-left-24", + "-left-28", "-left-3", + "-left-3.5", + "-left-32", + "-left-36", "-left-4", + "-left-40", + "-left-44", + "-left-48", + "-left-5", + "-left-52", + "-left-56", + "-left-6", + "-left-60", + "-left-64", + "-left-7", + "-left-72", + "-left-8", + "-left-80", + "-left-9", + "-left-96", + "-m-0", "-m-0.5", "-m-1", + "-m-1.5", + "-m-10", + "-m-11", + "-m-12", + "-m-14", + "-m-16", + "-m-2", + "-m-2.5", + "-m-20", + "-m-24", + "-m-28", "-m-3", + "-m-3.5", + "-m-32", + "-m-36", "-m-4", + "-m-40", + "-m-44", + "-m-48", + "-m-5", + "-m-52", + "-m-56", + "-m-6", + "-m-60", + "-m-64", + "-m-7", + "-m-72", + "-m-8", + "-m-80", + "-m-9", + "-m-96", + "-mb-0", "-mb-0.5", "-mb-1", + "-mb-1.5", + "-mb-10", + "-mb-11", + "-mb-12", + "-mb-14", + "-mb-16", + "-mb-2", + "-mb-2.5", + "-mb-20", + "-mb-24", + "-mb-28", "-mb-3", + "-mb-3.5", + "-mb-32", + "-mb-36", "-mb-4", + "-mb-40", + "-mb-44", + "-mb-48", + "-mb-5", + "-mb-52", + "-mb-56", + "-mb-6", + "-mb-60", + "-mb-64", + "-mb-7", + "-mb-72", + "-mb-8", + "-mb-80", + "-mb-9", + "-mb-96", + "-me-0", "-me-0.5", "-me-1", + "-me-1.5", + "-me-10", + "-me-11", + "-me-12", + "-me-14", + "-me-16", + "-me-2", + "-me-2.5", + "-me-20", + "-me-24", + "-me-28", "-me-3", + "-me-3.5", + "-me-32", + "-me-36", "-me-4", + "-me-40", + "-me-44", + "-me-48", + "-me-5", + "-me-52", + "-me-56", + "-me-6", + "-me-60", + "-me-64", + "-me-7", + "-me-72", + "-me-8", + "-me-80", + "-me-9", + "-me-96", + "-ml-0", "-ml-0.5", "-ml-1", + "-ml-1.5", + "-ml-10", + "-ml-11", + "-ml-12", + "-ml-14", + "-ml-16", + "-ml-2", + "-ml-2.5", + "-ml-20", + "-ml-24", + "-ml-28", "-ml-3", + "-ml-3.5", + "-ml-32", + "-ml-36", "-ml-4", + "-ml-40", + "-ml-44", + "-ml-48", + "-ml-5", + "-ml-52", + "-ml-56", + "-ml-6", + "-ml-60", + "-ml-64", + "-ml-7", + "-ml-72", + "-ml-8", + "-ml-80", + "-ml-9", + "-ml-96", + "-mr-0", "-mr-0.5", "-mr-1", + "-mr-1.5", + "-mr-10", + "-mr-11", + "-mr-12", + "-mr-14", + "-mr-16", + "-mr-2", + "-mr-2.5", + "-mr-20", + "-mr-24", + "-mr-28", "-mr-3", + "-mr-3.5", + "-mr-32", + "-mr-36", "-mr-4", + "-mr-40", + "-mr-44", + "-mr-48", + "-mr-5", + "-mr-52", + "-mr-56", + "-mr-6", + "-mr-60", + "-mr-64", + "-mr-7", + "-mr-72", + "-mr-8", + "-mr-80", + "-mr-9", + "-mr-96", + "-ms-0", "-ms-0.5", "-ms-1", + "-ms-1.5", + "-ms-10", + "-ms-11", + "-ms-12", + "-ms-14", + "-ms-16", + "-ms-2", + "-ms-2.5", + "-ms-20", + "-ms-24", + "-ms-28", "-ms-3", + "-ms-3.5", + "-ms-32", + "-ms-36", "-ms-4", + "-ms-40", + "-ms-44", + "-ms-48", + "-ms-5", + "-ms-52", + "-ms-56", + "-ms-6", + "-ms-60", + "-ms-64", + "-ms-7", + "-ms-72", + "-ms-8", + "-ms-80", + "-ms-9", + "-ms-96", + "-mt-0", "-mt-0.5", "-mt-1", + "-mt-1.5", + "-mt-10", + "-mt-11", + "-mt-12", + "-mt-14", + "-mt-16", + "-mt-2", + "-mt-2.5", + "-mt-20", + "-mt-24", + "-mt-28", "-mt-3", + "-mt-3.5", + "-mt-32", + "-mt-36", "-mt-4", + "-mt-40", + "-mt-44", + "-mt-48", + "-mt-5", + "-mt-52", + "-mt-56", + "-mt-6", + "-mt-60", + "-mt-64", + "-mt-7", + "-mt-72", + "-mt-8", + "-mt-80", + "-mt-9", + "-mt-96", + "-mx-0", "-mx-0.5", "-mx-1", + "-mx-1.5", + "-mx-10", + "-mx-11", + "-mx-12", + "-mx-14", + "-mx-16", + "-mx-2", + "-mx-2.5", + "-mx-20", + "-mx-24", + "-mx-28", "-mx-3", + "-mx-3.5", + "-mx-32", + "-mx-36", "-mx-4", + "-mx-40", + "-mx-44", + "-mx-48", + "-mx-5", + "-mx-52", + "-mx-56", + "-mx-6", + "-mx-60", + "-mx-64", + "-mx-7", + "-mx-72", + "-mx-8", + "-mx-80", + "-mx-9", + "-mx-96", + "-my-0", "-my-0.5", "-my-1", + "-my-1.5", + "-my-10", + "-my-11", + "-my-12", + "-my-14", + "-my-16", + "-my-2", + "-my-2.5", + "-my-20", + "-my-24", + "-my-28", "-my-3", + "-my-3.5", + "-my-32", + "-my-36", "-my-4", + "-my-40", + "-my-44", + "-my-48", + "-my-5", + "-my-52", + "-my-56", + "-my-6", + "-my-60", + "-my-64", + "-my-7", + "-my-72", + "-my-8", + "-my-80", + "-my-9", + "-my-96", "-order-1", "-order-10", "-order-11", @@ -104,10 +584,40 @@ exports[`getClassList 1`] = ` "-order-7", "-order-8", "-order-9", + "-right-0", "-right-0.5", "-right-1", + "-right-1.5", + "-right-10", + "-right-11", + "-right-12", + "-right-14", + "-right-16", + "-right-2", + "-right-2.5", + "-right-20", + "-right-24", + "-right-28", "-right-3", + "-right-3.5", + "-right-32", + "-right-36", "-right-4", + "-right-40", + "-right-44", + "-right-48", + "-right-5", + "-right-52", + "-right-56", + "-right-6", + "-right-60", + "-right-64", + "-right-7", + "-right-72", + "-right-8", + "-right-80", + "-right-9", + "-right-96", "-rotate-0", "-rotate-1", "-rotate-12", @@ -214,78 +724,312 @@ exports[`getClassList 1`] = ` "-scale-z-75", "-scale-z-90", "-scale-z-95", + "-scroll-m-0", "-scroll-m-0.5", "-scroll-m-1", + "-scroll-m-1.5", + "-scroll-m-10", + "-scroll-m-11", + "-scroll-m-12", + "-scroll-m-14", + "-scroll-m-16", + "-scroll-m-2", + "-scroll-m-2.5", + "-scroll-m-20", + "-scroll-m-24", + "-scroll-m-28", "-scroll-m-3", + "-scroll-m-3.5", + "-scroll-m-32", + "-scroll-m-36", "-scroll-m-4", + "-scroll-m-40", + "-scroll-m-44", + "-scroll-m-48", + "-scroll-m-5", + "-scroll-m-52", + "-scroll-m-56", + "-scroll-m-6", + "-scroll-m-60", + "-scroll-m-64", + "-scroll-m-7", + "-scroll-m-72", + "-scroll-m-8", + "-scroll-m-80", + "-scroll-m-9", + "-scroll-m-96", + "-scroll-mb-0", "-scroll-mb-0.5", "-scroll-mb-1", + "-scroll-mb-1.5", + "-scroll-mb-10", + "-scroll-mb-11", + "-scroll-mb-12", + "-scroll-mb-14", + "-scroll-mb-16", + "-scroll-mb-2", + "-scroll-mb-2.5", + "-scroll-mb-20", + "-scroll-mb-24", + "-scroll-mb-28", "-scroll-mb-3", + "-scroll-mb-3.5", + "-scroll-mb-32", + "-scroll-mb-36", "-scroll-mb-4", + "-scroll-mb-40", + "-scroll-mb-44", + "-scroll-mb-48", + "-scroll-mb-5", + "-scroll-mb-52", + "-scroll-mb-56", + "-scroll-mb-6", + "-scroll-mb-60", + "-scroll-mb-64", + "-scroll-mb-7", + "-scroll-mb-72", + "-scroll-mb-8", + "-scroll-mb-80", + "-scroll-mb-9", + "-scroll-mb-96", + "-scroll-me-0", "-scroll-me-0.5", "-scroll-me-1", + "-scroll-me-1.5", + "-scroll-me-10", + "-scroll-me-11", + "-scroll-me-12", + "-scroll-me-14", + "-scroll-me-16", + "-scroll-me-2", + "-scroll-me-2.5", + "-scroll-me-20", + "-scroll-me-24", + "-scroll-me-28", "-scroll-me-3", + "-scroll-me-3.5", + "-scroll-me-32", + "-scroll-me-36", "-scroll-me-4", + "-scroll-me-40", + "-scroll-me-44", + "-scroll-me-48", + "-scroll-me-5", + "-scroll-me-52", + "-scroll-me-56", + "-scroll-me-6", + "-scroll-me-60", + "-scroll-me-64", + "-scroll-me-7", + "-scroll-me-72", + "-scroll-me-8", + "-scroll-me-80", + "-scroll-me-9", + "-scroll-me-96", + "-scroll-ml-0", "-scroll-ml-0.5", "-scroll-ml-1", + "-scroll-ml-1.5", + "-scroll-ml-10", + "-scroll-ml-11", + "-scroll-ml-12", + "-scroll-ml-14", + "-scroll-ml-16", + "-scroll-ml-2", + "-scroll-ml-2.5", + "-scroll-ml-20", + "-scroll-ml-24", + "-scroll-ml-28", "-scroll-ml-3", + "-scroll-ml-3.5", + "-scroll-ml-32", + "-scroll-ml-36", "-scroll-ml-4", + "-scroll-ml-40", + "-scroll-ml-44", + "-scroll-ml-48", + "-scroll-ml-5", + "-scroll-ml-52", + "-scroll-ml-56", + "-scroll-ml-6", + "-scroll-ml-60", + "-scroll-ml-64", + "-scroll-ml-7", + "-scroll-ml-72", + "-scroll-ml-8", + "-scroll-ml-80", + "-scroll-ml-9", + "-scroll-ml-96", + "-scroll-mr-0", "-scroll-mr-0.5", "-scroll-mr-1", + "-scroll-mr-1.5", + "-scroll-mr-10", + "-scroll-mr-11", + "-scroll-mr-12", + "-scroll-mr-14", + "-scroll-mr-16", + "-scroll-mr-2", + "-scroll-mr-2.5", + "-scroll-mr-20", + "-scroll-mr-24", + "-scroll-mr-28", "-scroll-mr-3", + "-scroll-mr-3.5", + "-scroll-mr-32", + "-scroll-mr-36", "-scroll-mr-4", + "-scroll-mr-40", + "-scroll-mr-44", + "-scroll-mr-48", + "-scroll-mr-5", + "-scroll-mr-52", + "-scroll-mr-56", + "-scroll-mr-6", + "-scroll-mr-60", + "-scroll-mr-64", + "-scroll-mr-7", + "-scroll-mr-72", + "-scroll-mr-8", + "-scroll-mr-80", + "-scroll-mr-9", + "-scroll-mr-96", + "-scroll-ms-0", "-scroll-ms-0.5", "-scroll-ms-1", + "-scroll-ms-1.5", + "-scroll-ms-10", + "-scroll-ms-11", + "-scroll-ms-12", + "-scroll-ms-14", + "-scroll-ms-16", + "-scroll-ms-2", + "-scroll-ms-2.5", + "-scroll-ms-20", + "-scroll-ms-24", + "-scroll-ms-28", "-scroll-ms-3", + "-scroll-ms-3.5", + "-scroll-ms-32", + "-scroll-ms-36", "-scroll-ms-4", + "-scroll-ms-40", + "-scroll-ms-44", + "-scroll-ms-48", + "-scroll-ms-5", + "-scroll-ms-52", + "-scroll-ms-56", + "-scroll-ms-6", + "-scroll-ms-60", + "-scroll-ms-64", + "-scroll-ms-7", + "-scroll-ms-72", + "-scroll-ms-8", + "-scroll-ms-80", + "-scroll-ms-9", + "-scroll-ms-96", + "-scroll-mt-0", "-scroll-mt-0.5", "-scroll-mt-1", + "-scroll-mt-1.5", + "-scroll-mt-10", + "-scroll-mt-11", + "-scroll-mt-12", + "-scroll-mt-14", + "-scroll-mt-16", + "-scroll-mt-2", + "-scroll-mt-2.5", + "-scroll-mt-20", + "-scroll-mt-24", + "-scroll-mt-28", "-scroll-mt-3", + "-scroll-mt-3.5", + "-scroll-mt-32", + "-scroll-mt-36", "-scroll-mt-4", + "-scroll-mt-40", + "-scroll-mt-44", + "-scroll-mt-48", + "-scroll-mt-5", + "-scroll-mt-52", + "-scroll-mt-56", + "-scroll-mt-6", + "-scroll-mt-60", + "-scroll-mt-64", + "-scroll-mt-7", + "-scroll-mt-72", + "-scroll-mt-8", + "-scroll-mt-80", + "-scroll-mt-9", + "-scroll-mt-96", + "-scroll-mx-0", "-scroll-mx-0.5", "-scroll-mx-1", + "-scroll-mx-1.5", + "-scroll-mx-10", + "-scroll-mx-11", + "-scroll-mx-12", + "-scroll-mx-14", + "-scroll-mx-16", + "-scroll-mx-2", + "-scroll-mx-2.5", + "-scroll-mx-20", + "-scroll-mx-24", + "-scroll-mx-28", "-scroll-mx-3", + "-scroll-mx-3.5", + "-scroll-mx-32", + "-scroll-mx-36", "-scroll-mx-4", + "-scroll-mx-40", + "-scroll-mx-44", + "-scroll-mx-48", + "-scroll-mx-5", + "-scroll-mx-52", + "-scroll-mx-56", + "-scroll-mx-6", + "-scroll-mx-60", + "-scroll-mx-64", + "-scroll-mx-7", + "-scroll-mx-72", + "-scroll-mx-8", + "-scroll-mx-80", + "-scroll-mx-9", + "-scroll-mx-96", + "-scroll-my-0", "-scroll-my-0.5", "-scroll-my-1", + "-scroll-my-1.5", + "-scroll-my-10", + "-scroll-my-11", + "-scroll-my-12", + "-scroll-my-14", + "-scroll-my-16", + "-scroll-my-2", + "-scroll-my-2.5", + "-scroll-my-20", + "-scroll-my-24", + "-scroll-my-28", "-scroll-my-3", + "-scroll-my-3.5", + "-scroll-my-32", + "-scroll-my-36", "-scroll-my-4", - "-scroll-p-0.5", - "-scroll-p-1", - "-scroll-p-3", - "-scroll-p-4", - "-scroll-pb-0.5", - "-scroll-pb-1", - "-scroll-pb-3", - "-scroll-pb-4", - "-scroll-pe-0.5", - "-scroll-pe-1", - "-scroll-pe-3", - "-scroll-pe-4", - "-scroll-pl-0.5", - "-scroll-pl-1", - "-scroll-pl-3", - "-scroll-pl-4", - "-scroll-pr-0.5", - "-scroll-pr-1", - "-scroll-pr-3", - "-scroll-pr-4", - "-scroll-ps-0.5", - "-scroll-ps-1", - "-scroll-ps-3", - "-scroll-ps-4", - "-scroll-pt-0.5", - "-scroll-pt-1", - "-scroll-pt-3", - "-scroll-pt-4", - "-scroll-px-0.5", - "-scroll-px-1", - "-scroll-px-3", - "-scroll-px-4", - "-scroll-py-0.5", - "-scroll-py-1", - "-scroll-py-3", - "-scroll-py-4", + "-scroll-my-40", + "-scroll-my-44", + "-scroll-my-48", + "-scroll-my-5", + "-scroll-my-52", + "-scroll-my-56", + "-scroll-my-6", + "-scroll-my-60", + "-scroll-my-64", + "-scroll-my-7", + "-scroll-my-72", + "-scroll-my-8", + "-scroll-my-80", + "-scroll-my-9", + "-scroll-my-96", "-skew-0", "-skew-1", "-skew-12", @@ -304,38 +1048,278 @@ exports[`getClassList 1`] = ` "-skew-y-2", "-skew-y-3", "-skew-y-6", + "-space-x-0", "-space-x-0.5", "-space-x-1", + "-space-x-1.5", + "-space-x-10", + "-space-x-11", + "-space-x-12", + "-space-x-14", + "-space-x-16", + "-space-x-2", + "-space-x-2.5", + "-space-x-20", + "-space-x-24", + "-space-x-28", "-space-x-3", + "-space-x-3.5", + "-space-x-32", + "-space-x-36", "-space-x-4", + "-space-x-40", + "-space-x-44", + "-space-x-48", + "-space-x-5", + "-space-x-52", + "-space-x-56", + "-space-x-6", + "-space-x-60", + "-space-x-64", + "-space-x-7", + "-space-x-72", + "-space-x-8", + "-space-x-80", + "-space-x-9", + "-space-x-96", + "-space-y-0", "-space-y-0.5", "-space-y-1", + "-space-y-1.5", + "-space-y-10", + "-space-y-11", + "-space-y-12", + "-space-y-14", + "-space-y-16", + "-space-y-2", + "-space-y-2.5", + "-space-y-20", + "-space-y-24", + "-space-y-28", "-space-y-3", + "-space-y-3.5", + "-space-y-32", + "-space-y-36", "-space-y-4", + "-space-y-40", + "-space-y-44", + "-space-y-48", + "-space-y-5", + "-space-y-52", + "-space-y-56", + "-space-y-6", + "-space-y-60", + "-space-y-64", + "-space-y-7", + "-space-y-72", + "-space-y-8", + "-space-y-80", + "-space-y-9", + "-space-y-96", + "-start-0", "-start-0.5", "-start-1", + "-start-1.5", + "-start-10", + "-start-11", + "-start-12", + "-start-14", + "-start-16", + "-start-2", + "-start-2.5", + "-start-20", + "-start-24", + "-start-28", "-start-3", + "-start-3.5", + "-start-32", + "-start-36", "-start-4", + "-start-40", + "-start-44", + "-start-48", + "-start-5", + "-start-52", + "-start-56", + "-start-6", + "-start-60", + "-start-64", + "-start-7", + "-start-72", + "-start-8", + "-start-80", + "-start-9", + "-start-96", + "-top-0", "-top-0.5", "-top-1", + "-top-1.5", + "-top-10", + "-top-11", + "-top-12", + "-top-14", + "-top-16", + "-top-2", + "-top-2.5", + "-top-20", + "-top-24", + "-top-28", "-top-3", + "-top-3.5", + "-top-32", + "-top-36", "-top-4", + "-top-40", + "-top-44", + "-top-48", + "-top-5", + "-top-52", + "-top-56", + "-top-6", + "-top-60", + "-top-64", + "-top-7", + "-top-72", + "-top-8", + "-top-80", + "-top-9", + "-top-96", + "-translate-0", "-translate-0.5", "-translate-1", + "-translate-1.5", + "-translate-10", + "-translate-11", + "-translate-12", + "-translate-14", + "-translate-16", + "-translate-2", + "-translate-2.5", + "-translate-20", + "-translate-24", + "-translate-28", "-translate-3", + "-translate-3.5", + "-translate-32", + "-translate-36", "-translate-4", + "-translate-40", + "-translate-44", + "-translate-48", + "-translate-5", + "-translate-52", + "-translate-56", + "-translate-6", + "-translate-60", + "-translate-64", + "-translate-7", + "-translate-72", + "-translate-8", + "-translate-80", + "-translate-9", + "-translate-96", + "-translate-x-0", "-translate-x-0.5", "-translate-x-1", + "-translate-x-1.5", + "-translate-x-10", + "-translate-x-11", + "-translate-x-12", + "-translate-x-14", + "-translate-x-16", + "-translate-x-2", + "-translate-x-2.5", + "-translate-x-20", + "-translate-x-24", + "-translate-x-28", "-translate-x-3", + "-translate-x-3.5", + "-translate-x-32", + "-translate-x-36", "-translate-x-4", + "-translate-x-40", + "-translate-x-44", + "-translate-x-48", + "-translate-x-5", + "-translate-x-52", + "-translate-x-56", + "-translate-x-6", + "-translate-x-60", + "-translate-x-64", + "-translate-x-7", + "-translate-x-72", + "-translate-x-8", + "-translate-x-80", + "-translate-x-9", + "-translate-x-96", + "-translate-y-0", "-translate-y-0.5", "-translate-y-1", + "-translate-y-1.5", + "-translate-y-10", + "-translate-y-11", + "-translate-y-12", + "-translate-y-14", + "-translate-y-16", + "-translate-y-2", + "-translate-y-2.5", + "-translate-y-20", + "-translate-y-24", + "-translate-y-28", "-translate-y-3", + "-translate-y-3.5", + "-translate-y-32", + "-translate-y-36", "-translate-y-4", + "-translate-y-40", + "-translate-y-44", + "-translate-y-48", + "-translate-y-5", + "-translate-y-52", + "-translate-y-56", + "-translate-y-6", + "-translate-y-60", + "-translate-y-64", + "-translate-y-7", + "-translate-y-72", + "-translate-y-8", + "-translate-y-80", + "-translate-y-9", + "-translate-y-96", + "-translate-z-0", "-translate-z-0.5", "-translate-z-1", + "-translate-z-1.5", + "-translate-z-10", + "-translate-z-11", + "-translate-z-12", + "-translate-z-14", + "-translate-z-16", + "-translate-z-2", + "-translate-z-2.5", + "-translate-z-20", + "-translate-z-24", + "-translate-z-28", "-translate-z-3", + "-translate-z-3.5", + "-translate-z-32", + "-translate-z-36", "-translate-z-4", + "-translate-z-40", + "-translate-z-44", + "-translate-z-48", + "-translate-z-5", + "-translate-z-52", + "-translate-z-56", + "-translate-z-6", + "-translate-z-60", + "-translate-z-64", + "-translate-z-7", + "-translate-z-72", + "-translate-z-8", + "-translate-z-80", + "-translate-z-9", + "-translate-z-96", "-underline-offset-0", "-underline-offset-1", "-underline-offset-2", @@ -509,13 +1493,43 @@ exports[`getClassList 1`] = ` "backdrop-sepia-50", "backface-hidden", "backface-visible", + "basis-0", "basis-0.5", "basis-1", + "basis-1.5", + "basis-10", + "basis-11", + "basis-12", + "basis-14", + "basis-16", + "basis-2", + "basis-2.5", + "basis-20", + "basis-24", + "basis-28", "basis-3", + "basis-3.5", + "basis-32", + "basis-36", "basis-4", - "basis-4", + "basis-40", + "basis-44", + "basis-48", + "basis-5", + "basis-52", + "basis-56", + "basis-6", + "basis-60", + "basis-64", + "basis-7", + "basis-72", + "basis-8", + "basis-80", + "basis-9", + "basis-96", "basis-auto", "basis-full", + "basis-px", "bg-auto", "bg-blend-color", "bg-blend-color-burn", @@ -1183,18 +2197,111 @@ exports[`getClassList 1`] = ` "border-s-transparent/100", "border-separate", "border-solid", + "border-spacing-0", "border-spacing-0.5", "border-spacing-1", + "border-spacing-1.5", + "border-spacing-10", + "border-spacing-11", + "border-spacing-12", + "border-spacing-14", + "border-spacing-16", + "border-spacing-2", + "border-spacing-2.5", + "border-spacing-20", + "border-spacing-24", + "border-spacing-28", "border-spacing-3", + "border-spacing-3.5", + "border-spacing-32", + "border-spacing-36", "border-spacing-4", + "border-spacing-40", + "border-spacing-44", + "border-spacing-48", + "border-spacing-5", + "border-spacing-52", + "border-spacing-56", + "border-spacing-6", + "border-spacing-60", + "border-spacing-64", + "border-spacing-7", + "border-spacing-72", + "border-spacing-8", + "border-spacing-80", + "border-spacing-9", + "border-spacing-96", + "border-spacing-px", + "border-spacing-x-0", "border-spacing-x-0.5", "border-spacing-x-1", + "border-spacing-x-1.5", + "border-spacing-x-10", + "border-spacing-x-11", + "border-spacing-x-12", + "border-spacing-x-14", + "border-spacing-x-16", + "border-spacing-x-2", + "border-spacing-x-2.5", + "border-spacing-x-20", + "border-spacing-x-24", + "border-spacing-x-28", "border-spacing-x-3", + "border-spacing-x-3.5", + "border-spacing-x-32", + "border-spacing-x-36", "border-spacing-x-4", + "border-spacing-x-40", + "border-spacing-x-44", + "border-spacing-x-48", + "border-spacing-x-5", + "border-spacing-x-52", + "border-spacing-x-56", + "border-spacing-x-6", + "border-spacing-x-60", + "border-spacing-x-64", + "border-spacing-x-7", + "border-spacing-x-72", + "border-spacing-x-8", + "border-spacing-x-80", + "border-spacing-x-9", + "border-spacing-x-96", + "border-spacing-x-px", + "border-spacing-y-0", "border-spacing-y-0.5", "border-spacing-y-1", + "border-spacing-y-1.5", + "border-spacing-y-10", + "border-spacing-y-11", + "border-spacing-y-12", + "border-spacing-y-14", + "border-spacing-y-16", + "border-spacing-y-2", + "border-spacing-y-2.5", + "border-spacing-y-20", + "border-spacing-y-24", + "border-spacing-y-28", "border-spacing-y-3", + "border-spacing-y-3.5", + "border-spacing-y-32", + "border-spacing-y-36", "border-spacing-y-4", + "border-spacing-y-40", + "border-spacing-y-44", + "border-spacing-y-48", + "border-spacing-y-5", + "border-spacing-y-52", + "border-spacing-y-56", + "border-spacing-y-6", + "border-spacing-y-60", + "border-spacing-y-64", + "border-spacing-y-7", + "border-spacing-y-72", + "border-spacing-y-8", + "border-spacing-y-80", + "border-spacing-y-9", + "border-spacing-y-96", + "border-spacing-y-px", "border-t", "border-t/0", "border-t/5", @@ -1493,12 +2600,43 @@ exports[`getClassList 1`] = ` "border-y-transparent/90", "border-y-transparent/95", "border-y-transparent/100", + "bottom-0", "bottom-0.5", "bottom-1", + "bottom-1.5", + "bottom-10", + "bottom-11", + "bottom-12", + "bottom-14", + "bottom-16", + "bottom-2", + "bottom-2.5", + "bottom-20", + "bottom-24", + "bottom-28", "bottom-3", + "bottom-3.5", + "bottom-32", + "bottom-36", "bottom-4", + "bottom-40", + "bottom-44", + "bottom-48", + "bottom-5", + "bottom-52", + "bottom-56", + "bottom-6", + "bottom-60", + "bottom-64", + "bottom-7", + "bottom-72", + "bottom-8", + "bottom-80", + "bottom-9", + "bottom-96", "bottom-auto", "bottom-full", + "bottom-px", "box-border", "box-content", "box-decoration-clone", @@ -1663,7 +2801,6 @@ exports[`getClassList 1`] = ` "columns-2", "columns-3", "columns-4", - "columns-4", "columns-5", "columns-6", "columns-7", @@ -1913,12 +3050,43 @@ exports[`getClassList 1`] = ` "duration-initial", "ease-initial", "ease-linear", + "end-0", "end-0.5", "end-1", + "end-1.5", + "end-10", + "end-11", + "end-12", + "end-14", + "end-16", + "end-2", + "end-2.5", + "end-20", + "end-24", + "end-28", "end-3", + "end-3.5", + "end-32", + "end-36", "end-4", + "end-40", + "end-44", + "end-48", + "end-5", + "end-52", + "end-56", + "end-6", + "end-60", + "end-64", + "end-7", + "end-72", + "end-8", + "end-80", + "end-9", + "end-96", "end-auto", "end-full", + "end-px", "field-sizing-content", "field-sizing-fixed", "fill-current", @@ -2122,18 +3290,111 @@ exports[`getClassList 1`] = ` "from-transparent/90", "from-transparent/95", "from-transparent/100", + "gap-0", "gap-0.5", "gap-1", + "gap-1.5", + "gap-10", + "gap-11", + "gap-12", + "gap-14", + "gap-16", + "gap-2", + "gap-2.5", + "gap-20", + "gap-24", + "gap-28", "gap-3", + "gap-3.5", + "gap-32", + "gap-36", "gap-4", + "gap-40", + "gap-44", + "gap-48", + "gap-5", + "gap-52", + "gap-56", + "gap-6", + "gap-60", + "gap-64", + "gap-7", + "gap-72", + "gap-8", + "gap-80", + "gap-9", + "gap-96", + "gap-px", + "gap-x-0", "gap-x-0.5", "gap-x-1", + "gap-x-1.5", + "gap-x-10", + "gap-x-11", + "gap-x-12", + "gap-x-14", + "gap-x-16", + "gap-x-2", + "gap-x-2.5", + "gap-x-20", + "gap-x-24", + "gap-x-28", "gap-x-3", + "gap-x-3.5", + "gap-x-32", + "gap-x-36", "gap-x-4", + "gap-x-40", + "gap-x-44", + "gap-x-48", + "gap-x-5", + "gap-x-52", + "gap-x-56", + "gap-x-6", + "gap-x-60", + "gap-x-64", + "gap-x-7", + "gap-x-72", + "gap-x-8", + "gap-x-80", + "gap-x-9", + "gap-x-96", + "gap-x-px", + "gap-y-0", "gap-y-0.5", "gap-y-1", + "gap-y-1.5", + "gap-y-10", + "gap-y-11", + "gap-y-12", + "gap-y-14", + "gap-y-16", + "gap-y-2", + "gap-y-2.5", + "gap-y-20", + "gap-y-24", + "gap-y-28", "gap-y-3", + "gap-y-3.5", + "gap-y-32", + "gap-y-36", "gap-y-4", + "gap-y-40", + "gap-y-44", + "gap-y-48", + "gap-y-5", + "gap-y-52", + "gap-y-56", + "gap-y-6", + "gap-y-60", + "gap-y-64", + "gap-y-7", + "gap-y-72", + "gap-y-8", + "gap-y-80", + "gap-y-9", + "gap-y-96", + "gap-y-px", "grayscale", "grayscale-0", "grayscale-100", @@ -2176,19 +3437,53 @@ exports[`getClassList 1`] = ` "grid-rows-subgrid", "grow", "grow-0", + "h-0", "h-0.5", "h-1", + "h-1.5", + "h-10", + "h-11", + "h-12", + "h-14", + "h-16", + "h-2", + "h-2.5", + "h-20", + "h-24", + "h-28", "h-3", + "h-3.5", + "h-32", + "h-36", "h-4", + "h-40", + "h-44", + "h-48", + "h-5", + "h-52", + "h-56", + "h-6", + "h-60", + "h-64", + "h-7", + "h-72", + "h-8", + "h-80", + "h-9", + "h-96", "h-auto", "h-dvh", + "h-dvw", "h-fit", "h-full", "h-lvh", + "h-lvw", "h-max", "h-min", + "h-px", "h-screen", "h-svh", + "h-svw", "hidden", "hue-rotate-0", "hue-rotate-15", @@ -2199,21 +3494,83 @@ exports[`getClassList 1`] = ` "hyphens-auto", "hyphens-manual", "hyphens-none", + "indent-0", "indent-0.5", "indent-1", + "indent-1.5", + "indent-10", + "indent-11", + "indent-12", + "indent-14", + "indent-16", + "indent-2", + "indent-2.5", + "indent-20", + "indent-24", + "indent-28", "indent-3", + "indent-3.5", + "indent-32", + "indent-36", "indent-4", + "indent-40", + "indent-44", + "indent-48", + "indent-5", + "indent-52", + "indent-56", + "indent-6", + "indent-60", + "indent-64", + "indent-7", + "indent-72", + "indent-8", + "indent-80", + "indent-9", + "indent-96", + "indent-px", "inline", "inline-block", "inline-flex", "inline-grid", "inline-table", + "inset-0", "inset-0.5", "inset-1", + "inset-1.5", + "inset-10", + "inset-11", + "inset-12", + "inset-14", + "inset-16", + "inset-2", + "inset-2.5", + "inset-20", + "inset-24", + "inset-28", "inset-3", + "inset-3.5", + "inset-32", + "inset-36", "inset-4", + "inset-40", + "inset-44", + "inset-48", + "inset-5", + "inset-52", + "inset-56", + "inset-6", + "inset-60", + "inset-64", + "inset-7", + "inset-72", + "inset-8", + "inset-80", + "inset-9", + "inset-96", "inset-auto", "inset-full", + "inset-px", "inset-ring", "inset-ring-0", "inset-ring-1", @@ -2354,18 +3711,80 @@ exports[`getClassList 1`] = ` "inset-shadow-transparent/90", "inset-shadow-transparent/95", "inset-shadow-transparent/100", + "inset-x-0", "inset-x-0.5", "inset-x-1", + "inset-x-1.5", + "inset-x-10", + "inset-x-11", + "inset-x-12", + "inset-x-14", + "inset-x-16", + "inset-x-2", + "inset-x-2.5", + "inset-x-20", + "inset-x-24", + "inset-x-28", "inset-x-3", + "inset-x-3.5", + "inset-x-32", + "inset-x-36", "inset-x-4", + "inset-x-40", + "inset-x-44", + "inset-x-48", + "inset-x-5", + "inset-x-52", + "inset-x-56", + "inset-x-6", + "inset-x-60", + "inset-x-64", + "inset-x-7", + "inset-x-72", + "inset-x-8", + "inset-x-80", + "inset-x-9", + "inset-x-96", "inset-x-auto", "inset-x-full", + "inset-x-px", + "inset-y-0", "inset-y-0.5", "inset-y-1", + "inset-y-1.5", + "inset-y-10", + "inset-y-11", + "inset-y-12", + "inset-y-14", + "inset-y-16", + "inset-y-2", + "inset-y-2.5", + "inset-y-20", + "inset-y-24", + "inset-y-28", "inset-y-3", + "inset-y-3.5", + "inset-y-32", + "inset-y-36", "inset-y-4", + "inset-y-40", + "inset-y-44", + "inset-y-48", + "inset-y-5", + "inset-y-52", + "inset-y-56", + "inset-y-6", + "inset-y-60", + "inset-y-64", + "inset-y-7", + "inset-y-72", + "inset-y-8", + "inset-y-80", + "inset-y-9", + "inset-y-96", "inset-y-auto", "inset-y-full", + "inset-y-px", "invert", "invert-0", "invert-100", @@ -2400,12 +3819,78 @@ exports[`getClassList 1`] = ` "justify-self-stretch", "justify-start", "justify-stretch", + "leading-0", + "leading-0.5", + "leading-1", + "leading-1.5", + "leading-10", + "leading-11", + "leading-12", + "leading-14", + "leading-16", + "leading-2", + "leading-2.5", + "leading-20", + "leading-24", + "leading-28", + "leading-3", + "leading-3.5", + "leading-32", + "leading-36", + "leading-4", + "leading-40", + "leading-44", + "leading-48", + "leading-5", + "leading-52", + "leading-56", + "leading-6", + "leading-60", + "leading-64", + "leading-7", + "leading-72", + "leading-8", + "leading-80", + "leading-9", + "leading-96", + "leading-px", + "left-0", "left-0.5", "left-1", + "left-1.5", + "left-10", + "left-11", + "left-12", + "left-14", + "left-16", + "left-2", + "left-2.5", + "left-20", + "left-24", + "left-28", "left-3", + "left-3.5", + "left-32", + "left-36", "left-4", + "left-40", + "left-44", + "left-48", + "left-5", + "left-52", + "left-56", + "left-6", + "left-60", + "left-64", + "left-7", + "left-72", + "left-8", + "left-80", + "left-9", + "left-96", "left-auto", "left-full", + "left-px", "line-clamp-1", "line-clamp-2", "line-clamp-3", @@ -2423,67 +3908,306 @@ exports[`getClassList 1`] = ` "list-none", "list-outside", "lowercase", + "m-0", "m-0.5", "m-1", + "m-1.5", + "m-10", + "m-11", + "m-12", + "m-14", + "m-16", + "m-2", + "m-2.5", + "m-20", + "m-24", + "m-28", "m-3", + "m-3.5", + "m-32", + "m-36", "m-4", + "m-40", + "m-44", + "m-48", + "m-5", + "m-52", + "m-56", + "m-6", + "m-60", + "m-64", + "m-7", + "m-72", + "m-8", + "m-80", + "m-9", + "m-96", "m-auto", + "m-px", + "max-h-0", "max-h-0.5", "max-h-1", + "max-h-1.5", + "max-h-10", + "max-h-11", + "max-h-12", + "max-h-14", + "max-h-16", + "max-h-2", + "max-h-2.5", + "max-h-20", + "max-h-24", + "max-h-28", "max-h-3", + "max-h-3.5", + "max-h-32", + "max-h-36", "max-h-4", + "max-h-40", + "max-h-44", + "max-h-48", + "max-h-5", + "max-h-52", + "max-h-56", + "max-h-6", + "max-h-60", + "max-h-64", + "max-h-7", + "max-h-72", + "max-h-8", + "max-h-80", + "max-h-9", + "max-h-96", + "max-h-auto", "max-h-dvh", + "max-h-dvw", "max-h-fit", "max-h-full", "max-h-lvh", + "max-h-lvw", "max-h-max", "max-h-min", "max-h-none", + "max-h-px", "max-h-screen", "max-h-svh", + "max-h-svw", + "max-w-0", "max-w-0.5", "max-w-1", + "max-w-1.5", + "max-w-10", + "max-w-11", + "max-w-12", + "max-w-14", + "max-w-16", + "max-w-2", + "max-w-2.5", + "max-w-20", + "max-w-24", + "max-w-28", "max-w-3", + "max-w-3.5", + "max-w-32", + "max-w-36", "max-w-4", - "max-w-4", + "max-w-40", + "max-w-44", + "max-w-48", + "max-w-5", + "max-w-52", + "max-w-56", + "max-w-6", + "max-w-60", + "max-w-64", + "max-w-7", + "max-w-72", + "max-w-8", + "max-w-80", + "max-w-9", + "max-w-96", + "max-w-auto", + "max-w-dvh", + "max-w-dvw", "max-w-fit", "max-w-full", + "max-w-lvh", + "max-w-lvw", "max-w-max", "max-w-min", "max-w-none", + "max-w-px", + "max-w-screen", + "max-w-svh", + "max-w-svw", + "mb-0", "mb-0.5", "mb-1", + "mb-1.5", + "mb-10", + "mb-11", + "mb-12", + "mb-14", + "mb-16", + "mb-2", + "mb-2.5", + "mb-20", + "mb-24", + "mb-28", "mb-3", + "mb-3.5", + "mb-32", + "mb-36", "mb-4", + "mb-40", + "mb-44", + "mb-48", + "mb-5", + "mb-52", + "mb-56", + "mb-6", + "mb-60", + "mb-64", + "mb-7", + "mb-72", + "mb-8", + "mb-80", + "mb-9", + "mb-96", "mb-auto", + "mb-px", + "me-0", "me-0.5", "me-1", + "me-1.5", + "me-10", + "me-11", + "me-12", + "me-14", + "me-16", + "me-2", + "me-2.5", + "me-20", + "me-24", + "me-28", "me-3", + "me-3.5", + "me-32", + "me-36", "me-4", + "me-40", + "me-44", + "me-48", + "me-5", + "me-52", + "me-56", + "me-6", + "me-60", + "me-64", + "me-7", + "me-72", + "me-8", + "me-80", + "me-9", + "me-96", "me-auto", + "me-px", + "min-h-0", "min-h-0.5", "min-h-1", + "min-h-1.5", + "min-h-10", + "min-h-11", + "min-h-12", + "min-h-14", + "min-h-16", + "min-h-2", + "min-h-2.5", + "min-h-20", + "min-h-24", + "min-h-28", "min-h-3", + "min-h-3.5", + "min-h-32", + "min-h-36", "min-h-4", + "min-h-40", + "min-h-44", + "min-h-48", + "min-h-5", + "min-h-52", + "min-h-56", + "min-h-6", + "min-h-60", + "min-h-64", + "min-h-7", + "min-h-72", + "min-h-8", + "min-h-80", + "min-h-9", + "min-h-96", "min-h-auto", "min-h-dvh", + "min-h-dvw", "min-h-fit", "min-h-full", "min-h-lvh", + "min-h-lvw", "min-h-max", "min-h-min", + "min-h-none", + "min-h-px", "min-h-screen", "min-h-svh", + "min-h-svw", + "min-w-0", "min-w-0.5", "min-w-1", + "min-w-1.5", + "min-w-10", + "min-w-11", + "min-w-12", + "min-w-14", + "min-w-16", + "min-w-2", + "min-w-2.5", + "min-w-20", + "min-w-24", + "min-w-28", "min-w-3", + "min-w-3.5", + "min-w-32", + "min-w-36", "min-w-4", - "min-w-4", + "min-w-40", + "min-w-44", + "min-w-48", + "min-w-5", + "min-w-52", + "min-w-56", + "min-w-6", + "min-w-60", + "min-w-64", + "min-w-7", + "min-w-72", + "min-w-8", + "min-w-80", + "min-w-9", + "min-w-96", "min-w-auto", + "min-w-dvh", + "min-w-dvw", "min-w-fit", "min-w-full", + "min-w-lvh", + "min-w-lvw", "min-w-max", "min-w-min", + "min-w-none", + "min-w-px", + "min-w-screen", + "min-w-svh", + "min-w-svw", "mix-blend-color", "mix-blend-color-burn", "mix-blend-color-dodge", @@ -2502,36 +4226,222 @@ exports[`getClassList 1`] = ` "mix-blend-saturation", "mix-blend-screen", "mix-blend-soft-light", + "ml-0", "ml-0.5", "ml-1", + "ml-1.5", + "ml-10", + "ml-11", + "ml-12", + "ml-14", + "ml-16", + "ml-2", + "ml-2.5", + "ml-20", + "ml-24", + "ml-28", "ml-3", + "ml-3.5", + "ml-32", + "ml-36", "ml-4", + "ml-40", + "ml-44", + "ml-48", + "ml-5", + "ml-52", + "ml-56", + "ml-6", + "ml-60", + "ml-64", + "ml-7", + "ml-72", + "ml-8", + "ml-80", + "ml-9", + "ml-96", "ml-auto", + "ml-px", + "mr-0", "mr-0.5", "mr-1", + "mr-1.5", + "mr-10", + "mr-11", + "mr-12", + "mr-14", + "mr-16", + "mr-2", + "mr-2.5", + "mr-20", + "mr-24", + "mr-28", "mr-3", + "mr-3.5", + "mr-32", + "mr-36", "mr-4", + "mr-40", + "mr-44", + "mr-48", + "mr-5", + "mr-52", + "mr-56", + "mr-6", + "mr-60", + "mr-64", + "mr-7", + "mr-72", + "mr-8", + "mr-80", + "mr-9", + "mr-96", "mr-auto", + "mr-px", + "ms-0", "ms-0.5", "ms-1", + "ms-1.5", + "ms-10", + "ms-11", + "ms-12", + "ms-14", + "ms-16", + "ms-2", + "ms-2.5", + "ms-20", + "ms-24", + "ms-28", "ms-3", + "ms-3.5", + "ms-32", + "ms-36", "ms-4", + "ms-40", + "ms-44", + "ms-48", + "ms-5", + "ms-52", + "ms-56", + "ms-6", + "ms-60", + "ms-64", + "ms-7", + "ms-72", + "ms-8", + "ms-80", + "ms-9", + "ms-96", "ms-auto", + "ms-px", + "mt-0", "mt-0.5", "mt-1", + "mt-1.5", + "mt-10", + "mt-11", + "mt-12", + "mt-14", + "mt-16", + "mt-2", + "mt-2.5", + "mt-20", + "mt-24", + "mt-28", "mt-3", + "mt-3.5", + "mt-32", + "mt-36", "mt-4", + "mt-40", + "mt-44", + "mt-48", + "mt-5", + "mt-52", + "mt-56", + "mt-6", + "mt-60", + "mt-64", + "mt-7", + "mt-72", + "mt-8", + "mt-80", + "mt-9", + "mt-96", "mt-auto", + "mt-px", + "mx-0", "mx-0.5", "mx-1", + "mx-1.5", + "mx-10", + "mx-11", + "mx-12", + "mx-14", + "mx-16", + "mx-2", + "mx-2.5", + "mx-20", + "mx-24", + "mx-28", "mx-3", + "mx-3.5", + "mx-32", + "mx-36", "mx-4", + "mx-40", + "mx-44", + "mx-48", + "mx-5", + "mx-52", + "mx-56", + "mx-6", + "mx-60", + "mx-64", + "mx-7", + "mx-72", + "mx-8", + "mx-80", + "mx-9", + "mx-96", "mx-auto", + "mx-px", + "my-0", "my-0.5", "my-1", + "my-1.5", + "my-10", + "my-11", + "my-12", + "my-14", + "my-16", + "my-2", + "my-2.5", + "my-20", + "my-24", + "my-28", "my-3", + "my-3.5", + "my-32", + "my-36", "my-4", + "my-40", + "my-44", + "my-48", + "my-5", + "my-52", + "my-56", + "my-6", + "my-60", + "my-64", + "my-7", + "my-72", + "my-8", + "my-80", + "my-9", + "my-96", "my-auto", + "my-px", "no-underline", "normal-case", "normal-nums", @@ -2727,18 +4637,111 @@ exports[`getClassList 1`] = ` "overscroll-y-auto", "overscroll-y-contain", "overscroll-y-none", + "p-0", "p-0.5", "p-1", + "p-1.5", + "p-10", + "p-11", + "p-12", + "p-14", + "p-16", + "p-2", + "p-2.5", + "p-20", + "p-24", + "p-28", "p-3", + "p-3.5", + "p-32", + "p-36", "p-4", + "p-40", + "p-44", + "p-48", + "p-5", + "p-52", + "p-56", + "p-6", + "p-60", + "p-64", + "p-7", + "p-72", + "p-8", + "p-80", + "p-9", + "p-96", + "p-px", + "pb-0", "pb-0.5", "pb-1", + "pb-1.5", + "pb-10", + "pb-11", + "pb-12", + "pb-14", + "pb-16", + "pb-2", + "pb-2.5", + "pb-20", + "pb-24", + "pb-28", "pb-3", + "pb-3.5", + "pb-32", + "pb-36", "pb-4", + "pb-40", + "pb-44", + "pb-48", + "pb-5", + "pb-52", + "pb-56", + "pb-6", + "pb-60", + "pb-64", + "pb-7", + "pb-72", + "pb-8", + "pb-80", + "pb-9", + "pb-96", + "pb-px", + "pe-0", "pe-0.5", "pe-1", + "pe-1.5", + "pe-10", + "pe-11", + "pe-12", + "pe-14", + "pe-16", + "pe-2", + "pe-2.5", + "pe-20", + "pe-24", + "pe-28", "pe-3", + "pe-3.5", + "pe-32", + "pe-36", "pe-4", + "pe-40", + "pe-44", + "pe-48", + "pe-5", + "pe-52", + "pe-56", + "pe-6", + "pe-60", + "pe-64", + "pe-7", + "pe-72", + "pe-8", + "pe-80", + "pe-9", + "pe-96", + "pe-px", "perspective-dramatic", "perspective-none", "perspective-normal", @@ -2751,10 +4754,41 @@ exports[`getClassList 1`] = ` "perspective-origin-top", "perspective-origin-top-left", "perspective-origin-top-right", + "pl-0", "pl-0.5", "pl-1", + "pl-1.5", + "pl-10", + "pl-11", + "pl-12", + "pl-14", + "pl-16", + "pl-2", + "pl-2.5", + "pl-20", + "pl-24", + "pl-28", "pl-3", + "pl-3.5", + "pl-32", + "pl-36", "pl-4", + "pl-40", + "pl-44", + "pl-48", + "pl-5", + "pl-52", + "pl-56", + "pl-6", + "pl-60", + "pl-64", + "pl-7", + "pl-72", + "pl-8", + "pl-80", + "pl-9", + "pl-96", + "pl-px", "place-content-around", "place-content-baseline", "place-content-between", @@ -2841,38 +4875,224 @@ exports[`getClassList 1`] = ` "placeholder-transparent/100", "pointer-events-auto", "pointer-events-none", + "pr-0", "pr-0.5", "pr-1", + "pr-1.5", + "pr-10", + "pr-11", + "pr-12", + "pr-14", + "pr-16", + "pr-2", + "pr-2.5", + "pr-20", + "pr-24", + "pr-28", "pr-3", + "pr-3.5", + "pr-32", + "pr-36", "pr-4", + "pr-40", + "pr-44", + "pr-48", + "pr-5", + "pr-52", + "pr-56", + "pr-6", + "pr-60", + "pr-64", + "pr-7", + "pr-72", + "pr-8", + "pr-80", + "pr-9", + "pr-96", + "pr-px", "proportional-nums", + "ps-0", "ps-0.5", "ps-1", + "ps-1.5", + "ps-10", + "ps-11", + "ps-12", + "ps-14", + "ps-16", + "ps-2", + "ps-2.5", + "ps-20", + "ps-24", + "ps-28", "ps-3", + "ps-3.5", + "ps-32", + "ps-36", "ps-4", + "ps-40", + "ps-44", + "ps-48", + "ps-5", + "ps-52", + "ps-56", + "ps-6", + "ps-60", + "ps-64", + "ps-7", + "ps-72", + "ps-8", + "ps-80", + "ps-9", + "ps-96", + "ps-px", + "pt-0", "pt-0.5", "pt-1", + "pt-1.5", + "pt-10", + "pt-11", + "pt-12", + "pt-14", + "pt-16", + "pt-2", + "pt-2.5", + "pt-20", + "pt-24", + "pt-28", "pt-3", + "pt-3.5", + "pt-32", + "pt-36", "pt-4", + "pt-40", + "pt-44", + "pt-48", + "pt-5", + "pt-52", + "pt-56", + "pt-6", + "pt-60", + "pt-64", + "pt-7", + "pt-72", + "pt-8", + "pt-80", + "pt-9", + "pt-96", + "pt-px", + "px-0", "px-0.5", "px-1", + "px-1.5", + "px-10", + "px-11", + "px-12", + "px-14", + "px-16", + "px-2", + "px-2.5", + "px-20", + "px-24", + "px-28", "px-3", + "px-3.5", + "px-32", + "px-36", "px-4", + "px-40", + "px-44", + "px-48", + "px-5", + "px-52", + "px-56", + "px-6", + "px-60", + "px-64", + "px-7", + "px-72", + "px-8", + "px-80", + "px-9", + "px-96", + "px-px", + "py-0", "py-0.5", "py-1", + "py-1.5", + "py-10", + "py-11", + "py-12", + "py-14", + "py-16", + "py-2", + "py-2.5", + "py-20", + "py-24", + "py-28", "py-3", + "py-3.5", + "py-32", + "py-36", "py-4", + "py-40", + "py-44", + "py-48", + "py-5", + "py-52", + "py-56", + "py-6", + "py-60", + "py-64", + "py-7", + "py-72", + "py-8", + "py-80", + "py-9", + "py-96", + "py-px", "relative", "resize", "resize-none", "resize-x", "resize-y", + "right-0", "right-0.5", "right-1", + "right-1.5", + "right-10", + "right-11", + "right-12", + "right-14", + "right-16", + "right-2", + "right-2.5", + "right-20", + "right-24", + "right-28", "right-3", + "right-3.5", + "right-32", + "right-36", "right-4", + "right-40", + "right-44", + "right-48", + "right-5", + "right-52", + "right-56", + "right-6", + "right-60", + "right-64", + "right-7", + "right-72", + "right-8", + "right-80", + "right-9", + "right-96", "right-auto", "right-full", + "right-px", "ring", "ring-0", "ring-1", @@ -3184,78 +5404,636 @@ exports[`getClassList 1`] = ` "scheme-only-dark", "scheme-only-light", "scroll-auto", + "scroll-m-0", "scroll-m-0.5", "scroll-m-1", + "scroll-m-1.5", + "scroll-m-10", + "scroll-m-11", + "scroll-m-12", + "scroll-m-14", + "scroll-m-16", + "scroll-m-2", + "scroll-m-2.5", + "scroll-m-20", + "scroll-m-24", + "scroll-m-28", "scroll-m-3", + "scroll-m-3.5", + "scroll-m-32", + "scroll-m-36", "scroll-m-4", + "scroll-m-40", + "scroll-m-44", + "scroll-m-48", + "scroll-m-5", + "scroll-m-52", + "scroll-m-56", + "scroll-m-6", + "scroll-m-60", + "scroll-m-64", + "scroll-m-7", + "scroll-m-72", + "scroll-m-8", + "scroll-m-80", + "scroll-m-9", + "scroll-m-96", + "scroll-m-px", + "scroll-mb-0", "scroll-mb-0.5", "scroll-mb-1", + "scroll-mb-1.5", + "scroll-mb-10", + "scroll-mb-11", + "scroll-mb-12", + "scroll-mb-14", + "scroll-mb-16", + "scroll-mb-2", + "scroll-mb-2.5", + "scroll-mb-20", + "scroll-mb-24", + "scroll-mb-28", "scroll-mb-3", + "scroll-mb-3.5", + "scroll-mb-32", + "scroll-mb-36", "scroll-mb-4", + "scroll-mb-40", + "scroll-mb-44", + "scroll-mb-48", + "scroll-mb-5", + "scroll-mb-52", + "scroll-mb-56", + "scroll-mb-6", + "scroll-mb-60", + "scroll-mb-64", + "scroll-mb-7", + "scroll-mb-72", + "scroll-mb-8", + "scroll-mb-80", + "scroll-mb-9", + "scroll-mb-96", + "scroll-mb-px", + "scroll-me-0", "scroll-me-0.5", "scroll-me-1", + "scroll-me-1.5", + "scroll-me-10", + "scroll-me-11", + "scroll-me-12", + "scroll-me-14", + "scroll-me-16", + "scroll-me-2", + "scroll-me-2.5", + "scroll-me-20", + "scroll-me-24", + "scroll-me-28", "scroll-me-3", + "scroll-me-3.5", + "scroll-me-32", + "scroll-me-36", "scroll-me-4", + "scroll-me-40", + "scroll-me-44", + "scroll-me-48", + "scroll-me-5", + "scroll-me-52", + "scroll-me-56", + "scroll-me-6", + "scroll-me-60", + "scroll-me-64", + "scroll-me-7", + "scroll-me-72", + "scroll-me-8", + "scroll-me-80", + "scroll-me-9", + "scroll-me-96", + "scroll-me-px", + "scroll-ml-0", "scroll-ml-0.5", "scroll-ml-1", + "scroll-ml-1.5", + "scroll-ml-10", + "scroll-ml-11", + "scroll-ml-12", + "scroll-ml-14", + "scroll-ml-16", + "scroll-ml-2", + "scroll-ml-2.5", + "scroll-ml-20", + "scroll-ml-24", + "scroll-ml-28", "scroll-ml-3", + "scroll-ml-3.5", + "scroll-ml-32", + "scroll-ml-36", "scroll-ml-4", + "scroll-ml-40", + "scroll-ml-44", + "scroll-ml-48", + "scroll-ml-5", + "scroll-ml-52", + "scroll-ml-56", + "scroll-ml-6", + "scroll-ml-60", + "scroll-ml-64", + "scroll-ml-7", + "scroll-ml-72", + "scroll-ml-8", + "scroll-ml-80", + "scroll-ml-9", + "scroll-ml-96", + "scroll-ml-px", + "scroll-mr-0", "scroll-mr-0.5", "scroll-mr-1", + "scroll-mr-1.5", + "scroll-mr-10", + "scroll-mr-11", + "scroll-mr-12", + "scroll-mr-14", + "scroll-mr-16", + "scroll-mr-2", + "scroll-mr-2.5", + "scroll-mr-20", + "scroll-mr-24", + "scroll-mr-28", "scroll-mr-3", + "scroll-mr-3.5", + "scroll-mr-32", + "scroll-mr-36", "scroll-mr-4", + "scroll-mr-40", + "scroll-mr-44", + "scroll-mr-48", + "scroll-mr-5", + "scroll-mr-52", + "scroll-mr-56", + "scroll-mr-6", + "scroll-mr-60", + "scroll-mr-64", + "scroll-mr-7", + "scroll-mr-72", + "scroll-mr-8", + "scroll-mr-80", + "scroll-mr-9", + "scroll-mr-96", + "scroll-mr-px", + "scroll-ms-0", "scroll-ms-0.5", "scroll-ms-1", + "scroll-ms-1.5", + "scroll-ms-10", + "scroll-ms-11", + "scroll-ms-12", + "scroll-ms-14", + "scroll-ms-16", + "scroll-ms-2", + "scroll-ms-2.5", + "scroll-ms-20", + "scroll-ms-24", + "scroll-ms-28", "scroll-ms-3", + "scroll-ms-3.5", + "scroll-ms-32", + "scroll-ms-36", "scroll-ms-4", + "scroll-ms-40", + "scroll-ms-44", + "scroll-ms-48", + "scroll-ms-5", + "scroll-ms-52", + "scroll-ms-56", + "scroll-ms-6", + "scroll-ms-60", + "scroll-ms-64", + "scroll-ms-7", + "scroll-ms-72", + "scroll-ms-8", + "scroll-ms-80", + "scroll-ms-9", + "scroll-ms-96", + "scroll-ms-px", + "scroll-mt-0", "scroll-mt-0.5", "scroll-mt-1", + "scroll-mt-1.5", + "scroll-mt-10", + "scroll-mt-11", + "scroll-mt-12", + "scroll-mt-14", + "scroll-mt-16", + "scroll-mt-2", + "scroll-mt-2.5", + "scroll-mt-20", + "scroll-mt-24", + "scroll-mt-28", "scroll-mt-3", + "scroll-mt-3.5", + "scroll-mt-32", + "scroll-mt-36", "scroll-mt-4", + "scroll-mt-40", + "scroll-mt-44", + "scroll-mt-48", + "scroll-mt-5", + "scroll-mt-52", + "scroll-mt-56", + "scroll-mt-6", + "scroll-mt-60", + "scroll-mt-64", + "scroll-mt-7", + "scroll-mt-72", + "scroll-mt-8", + "scroll-mt-80", + "scroll-mt-9", + "scroll-mt-96", + "scroll-mt-px", + "scroll-mx-0", "scroll-mx-0.5", "scroll-mx-1", + "scroll-mx-1.5", + "scroll-mx-10", + "scroll-mx-11", + "scroll-mx-12", + "scroll-mx-14", + "scroll-mx-16", + "scroll-mx-2", + "scroll-mx-2.5", + "scroll-mx-20", + "scroll-mx-24", + "scroll-mx-28", "scroll-mx-3", + "scroll-mx-3.5", + "scroll-mx-32", + "scroll-mx-36", "scroll-mx-4", + "scroll-mx-40", + "scroll-mx-44", + "scroll-mx-48", + "scroll-mx-5", + "scroll-mx-52", + "scroll-mx-56", + "scroll-mx-6", + "scroll-mx-60", + "scroll-mx-64", + "scroll-mx-7", + "scroll-mx-72", + "scroll-mx-8", + "scroll-mx-80", + "scroll-mx-9", + "scroll-mx-96", + "scroll-mx-px", + "scroll-my-0", "scroll-my-0.5", "scroll-my-1", + "scroll-my-1.5", + "scroll-my-10", + "scroll-my-11", + "scroll-my-12", + "scroll-my-14", + "scroll-my-16", + "scroll-my-2", + "scroll-my-2.5", + "scroll-my-20", + "scroll-my-24", + "scroll-my-28", "scroll-my-3", + "scroll-my-3.5", + "scroll-my-32", + "scroll-my-36", "scroll-my-4", + "scroll-my-40", + "scroll-my-44", + "scroll-my-48", + "scroll-my-5", + "scroll-my-52", + "scroll-my-56", + "scroll-my-6", + "scroll-my-60", + "scroll-my-64", + "scroll-my-7", + "scroll-my-72", + "scroll-my-8", + "scroll-my-80", + "scroll-my-9", + "scroll-my-96", + "scroll-my-px", + "scroll-p-0", "scroll-p-0.5", "scroll-p-1", + "scroll-p-1.5", + "scroll-p-10", + "scroll-p-11", + "scroll-p-12", + "scroll-p-14", + "scroll-p-16", + "scroll-p-2", + "scroll-p-2.5", + "scroll-p-20", + "scroll-p-24", + "scroll-p-28", "scroll-p-3", + "scroll-p-3.5", + "scroll-p-32", + "scroll-p-36", "scroll-p-4", + "scroll-p-40", + "scroll-p-44", + "scroll-p-48", + "scroll-p-5", + "scroll-p-52", + "scroll-p-56", + "scroll-p-6", + "scroll-p-60", + "scroll-p-64", + "scroll-p-7", + "scroll-p-72", + "scroll-p-8", + "scroll-p-80", + "scroll-p-9", + "scroll-p-96", + "scroll-p-px", + "scroll-pb-0", "scroll-pb-0.5", "scroll-pb-1", + "scroll-pb-1.5", + "scroll-pb-10", + "scroll-pb-11", + "scroll-pb-12", + "scroll-pb-14", + "scroll-pb-16", + "scroll-pb-2", + "scroll-pb-2.5", + "scroll-pb-20", + "scroll-pb-24", + "scroll-pb-28", "scroll-pb-3", + "scroll-pb-3.5", + "scroll-pb-32", + "scroll-pb-36", "scroll-pb-4", + "scroll-pb-40", + "scroll-pb-44", + "scroll-pb-48", + "scroll-pb-5", + "scroll-pb-52", + "scroll-pb-56", + "scroll-pb-6", + "scroll-pb-60", + "scroll-pb-64", + "scroll-pb-7", + "scroll-pb-72", + "scroll-pb-8", + "scroll-pb-80", + "scroll-pb-9", + "scroll-pb-96", + "scroll-pb-px", + "scroll-pe-0", "scroll-pe-0.5", "scroll-pe-1", + "scroll-pe-1.5", + "scroll-pe-10", + "scroll-pe-11", + "scroll-pe-12", + "scroll-pe-14", + "scroll-pe-16", + "scroll-pe-2", + "scroll-pe-2.5", + "scroll-pe-20", + "scroll-pe-24", + "scroll-pe-28", "scroll-pe-3", + "scroll-pe-3.5", + "scroll-pe-32", + "scroll-pe-36", "scroll-pe-4", + "scroll-pe-40", + "scroll-pe-44", + "scroll-pe-48", + "scroll-pe-5", + "scroll-pe-52", + "scroll-pe-56", + "scroll-pe-6", + "scroll-pe-60", + "scroll-pe-64", + "scroll-pe-7", + "scroll-pe-72", + "scroll-pe-8", + "scroll-pe-80", + "scroll-pe-9", + "scroll-pe-96", + "scroll-pe-px", + "scroll-pl-0", "scroll-pl-0.5", "scroll-pl-1", + "scroll-pl-1.5", + "scroll-pl-10", + "scroll-pl-11", + "scroll-pl-12", + "scroll-pl-14", + "scroll-pl-16", + "scroll-pl-2", + "scroll-pl-2.5", + "scroll-pl-20", + "scroll-pl-24", + "scroll-pl-28", "scroll-pl-3", + "scroll-pl-3.5", + "scroll-pl-32", + "scroll-pl-36", "scroll-pl-4", + "scroll-pl-40", + "scroll-pl-44", + "scroll-pl-48", + "scroll-pl-5", + "scroll-pl-52", + "scroll-pl-56", + "scroll-pl-6", + "scroll-pl-60", + "scroll-pl-64", + "scroll-pl-7", + "scroll-pl-72", + "scroll-pl-8", + "scroll-pl-80", + "scroll-pl-9", + "scroll-pl-96", + "scroll-pl-px", + "scroll-pr-0", "scroll-pr-0.5", "scroll-pr-1", + "scroll-pr-1.5", + "scroll-pr-10", + "scroll-pr-11", + "scroll-pr-12", + "scroll-pr-14", + "scroll-pr-16", + "scroll-pr-2", + "scroll-pr-2.5", + "scroll-pr-20", + "scroll-pr-24", + "scroll-pr-28", "scroll-pr-3", + "scroll-pr-3.5", + "scroll-pr-32", + "scroll-pr-36", "scroll-pr-4", + "scroll-pr-40", + "scroll-pr-44", + "scroll-pr-48", + "scroll-pr-5", + "scroll-pr-52", + "scroll-pr-56", + "scroll-pr-6", + "scroll-pr-60", + "scroll-pr-64", + "scroll-pr-7", + "scroll-pr-72", + "scroll-pr-8", + "scroll-pr-80", + "scroll-pr-9", + "scroll-pr-96", + "scroll-pr-px", + "scroll-ps-0", "scroll-ps-0.5", "scroll-ps-1", + "scroll-ps-1.5", + "scroll-ps-10", + "scroll-ps-11", + "scroll-ps-12", + "scroll-ps-14", + "scroll-ps-16", + "scroll-ps-2", + "scroll-ps-2.5", + "scroll-ps-20", + "scroll-ps-24", + "scroll-ps-28", "scroll-ps-3", + "scroll-ps-3.5", + "scroll-ps-32", + "scroll-ps-36", "scroll-ps-4", + "scroll-ps-40", + "scroll-ps-44", + "scroll-ps-48", + "scroll-ps-5", + "scroll-ps-52", + "scroll-ps-56", + "scroll-ps-6", + "scroll-ps-60", + "scroll-ps-64", + "scroll-ps-7", + "scroll-ps-72", + "scroll-ps-8", + "scroll-ps-80", + "scroll-ps-9", + "scroll-ps-96", + "scroll-ps-px", + "scroll-pt-0", "scroll-pt-0.5", "scroll-pt-1", + "scroll-pt-1.5", + "scroll-pt-10", + "scroll-pt-11", + "scroll-pt-12", + "scroll-pt-14", + "scroll-pt-16", + "scroll-pt-2", + "scroll-pt-2.5", + "scroll-pt-20", + "scroll-pt-24", + "scroll-pt-28", "scroll-pt-3", + "scroll-pt-3.5", + "scroll-pt-32", + "scroll-pt-36", "scroll-pt-4", + "scroll-pt-40", + "scroll-pt-44", + "scroll-pt-48", + "scroll-pt-5", + "scroll-pt-52", + "scroll-pt-56", + "scroll-pt-6", + "scroll-pt-60", + "scroll-pt-64", + "scroll-pt-7", + "scroll-pt-72", + "scroll-pt-8", + "scroll-pt-80", + "scroll-pt-9", + "scroll-pt-96", + "scroll-pt-px", + "scroll-px-0", "scroll-px-0.5", "scroll-px-1", + "scroll-px-1.5", + "scroll-px-10", + "scroll-px-11", + "scroll-px-12", + "scroll-px-14", + "scroll-px-16", + "scroll-px-2", + "scroll-px-2.5", + "scroll-px-20", + "scroll-px-24", + "scroll-px-28", "scroll-px-3", + "scroll-px-3.5", + "scroll-px-32", + "scroll-px-36", "scroll-px-4", + "scroll-px-40", + "scroll-px-44", + "scroll-px-48", + "scroll-px-5", + "scroll-px-52", + "scroll-px-56", + "scroll-px-6", + "scroll-px-60", + "scroll-px-64", + "scroll-px-7", + "scroll-px-72", + "scroll-px-8", + "scroll-px-80", + "scroll-px-9", + "scroll-px-96", + "scroll-px-px", + "scroll-py-0", "scroll-py-0.5", "scroll-py-1", + "scroll-py-1.5", + "scroll-py-10", + "scroll-py-11", + "scroll-py-12", + "scroll-py-14", + "scroll-py-16", + "scroll-py-2", + "scroll-py-2.5", + "scroll-py-20", + "scroll-py-24", + "scroll-py-28", "scroll-py-3", + "scroll-py-3.5", + "scroll-py-32", + "scroll-py-36", "scroll-py-4", + "scroll-py-40", + "scroll-py-44", + "scroll-py-48", + "scroll-py-5", + "scroll-py-52", + "scroll-py-56", + "scroll-py-6", + "scroll-py-60", + "scroll-py-64", + "scroll-py-7", + "scroll-py-72", + "scroll-py-8", + "scroll-py-80", + "scroll-py-9", + "scroll-py-96", + "scroll-py-px", "scroll-smooth", "select-all", "select-auto", @@ -3341,15 +6119,52 @@ exports[`getClassList 1`] = ` "shadow-transparent/100", "shrink", "shrink-0", + "size-0", "size-0.5", "size-1", + "size-1.5", + "size-10", + "size-11", + "size-12", + "size-14", + "size-16", + "size-2", + "size-2.5", + "size-20", + "size-24", + "size-28", "size-3", + "size-3.5", + "size-32", + "size-36", "size-4", + "size-40", + "size-44", + "size-48", + "size-5", + "size-52", + "size-56", + "size-6", + "size-60", + "size-64", + "size-7", + "size-72", + "size-8", + "size-80", + "size-9", + "size-96", "size-auto", + "size-dvh", + "size-dvw", "size-fit", "size-full", + "size-lvh", + "size-lvw", "size-max", "size-min", + "size-px", + "size-svh", + "size-svw", "skew-0", "skew-1", "skew-12", @@ -3381,24 +6196,117 @@ exports[`getClassList 1`] = ` "snap-start", "snap-x", "snap-y", + "space-x-0", "space-x-0.5", "space-x-1", + "space-x-1.5", + "space-x-10", + "space-x-11", + "space-x-12", + "space-x-14", + "space-x-16", + "space-x-2", + "space-x-2.5", + "space-x-20", + "space-x-24", + "space-x-28", "space-x-3", + "space-x-3.5", + "space-x-32", + "space-x-36", "space-x-4", + "space-x-40", + "space-x-44", + "space-x-48", + "space-x-5", + "space-x-52", + "space-x-56", + "space-x-6", + "space-x-60", + "space-x-64", + "space-x-7", + "space-x-72", + "space-x-8", + "space-x-80", + "space-x-9", + "space-x-96", + "space-x-px", "space-x-reverse", + "space-y-0", "space-y-0.5", "space-y-1", + "space-y-1.5", + "space-y-10", + "space-y-11", + "space-y-12", + "space-y-14", + "space-y-16", + "space-y-2", + "space-y-2.5", + "space-y-20", + "space-y-24", + "space-y-28", "space-y-3", + "space-y-3.5", + "space-y-32", + "space-y-36", "space-y-4", + "space-y-40", + "space-y-44", + "space-y-48", + "space-y-5", + "space-y-52", + "space-y-56", + "space-y-6", + "space-y-60", + "space-y-64", + "space-y-7", + "space-y-72", + "space-y-8", + "space-y-80", + "space-y-9", + "space-y-96", + "space-y-px", "space-y-reverse", "sr-only", "stacked-fractions", + "start-0", "start-0.5", "start-1", + "start-1.5", + "start-10", + "start-11", + "start-12", + "start-14", + "start-16", + "start-2", + "start-2.5", + "start-20", + "start-24", + "start-28", "start-3", + "start-3.5", + "start-32", + "start-36", "start-4", + "start-40", + "start-44", + "start-48", + "start-5", + "start-52", + "start-56", + "start-6", + "start-60", + "start-64", + "start-7", + "start-72", + "start-8", + "start-80", + "start-9", + "start-96", "start-auto", "start-full", + "start-px", "static", "sticky", "stroke-0", @@ -3651,12 +6559,43 @@ exports[`getClassList 1`] = ` "to-transparent/90", "to-transparent/95", "to-transparent/100", + "top-0", "top-0.5", "top-1", + "top-1.5", + "top-10", + "top-11", + "top-12", + "top-14", + "top-16", + "top-2", + "top-2.5", + "top-20", + "top-24", + "top-28", "top-3", + "top-3.5", + "top-32", + "top-36", "top-4", + "top-40", + "top-44", + "top-48", + "top-5", + "top-52", + "top-56", + "top-6", + "top-60", + "top-64", + "top-7", + "top-72", + "top-8", + "top-80", + "top-9", + "top-96", "top-auto", "top-full", + "top-px", "touch-auto", "touch-manipulation", "touch-none", @@ -3685,29 +6624,150 @@ exports[`getClassList 1`] = ` "transition-opacity", "transition-shadow", "transition-transform", + "translate-0", "translate-0.5", "translate-1", + "translate-1.5", + "translate-10", + "translate-11", + "translate-12", + "translate-14", + "translate-16", + "translate-2", + "translate-2.5", + "translate-20", + "translate-24", + "translate-28", "translate-3", + "translate-3.5", + "translate-32", + "translate-36", "translate-3d", "translate-4", + "translate-40", + "translate-44", + "translate-48", + "translate-5", + "translate-52", + "translate-56", + "translate-6", + "translate-60", + "translate-64", + "translate-7", + "translate-72", + "translate-8", + "translate-80", + "translate-9", + "translate-96", "translate-full", "translate-none", + "translate-px", + "translate-x-0", "translate-x-0.5", "translate-x-1", + "translate-x-1.5", + "translate-x-10", + "translate-x-11", + "translate-x-12", + "translate-x-14", + "translate-x-16", + "translate-x-2", + "translate-x-2.5", + "translate-x-20", + "translate-x-24", + "translate-x-28", "translate-x-3", + "translate-x-3.5", + "translate-x-32", + "translate-x-36", "translate-x-4", + "translate-x-40", + "translate-x-44", + "translate-x-48", + "translate-x-5", + "translate-x-52", + "translate-x-56", + "translate-x-6", + "translate-x-60", + "translate-x-64", + "translate-x-7", + "translate-x-72", + "translate-x-8", + "translate-x-80", + "translate-x-9", + "translate-x-96", "translate-x-full", "translate-x-px", + "translate-y-0", "translate-y-0.5", "translate-y-1", + "translate-y-1.5", + "translate-y-10", + "translate-y-11", + "translate-y-12", + "translate-y-14", + "translate-y-16", + "translate-y-2", + "translate-y-2.5", + "translate-y-20", + "translate-y-24", + "translate-y-28", "translate-y-3", + "translate-y-3.5", + "translate-y-32", + "translate-y-36", "translate-y-4", + "translate-y-40", + "translate-y-44", + "translate-y-48", + "translate-y-5", + "translate-y-52", + "translate-y-56", + "translate-y-6", + "translate-y-60", + "translate-y-64", + "translate-y-7", + "translate-y-72", + "translate-y-8", + "translate-y-80", + "translate-y-9", + "translate-y-96", "translate-y-full", "translate-y-px", + "translate-z-0", "translate-z-0.5", "translate-z-1", + "translate-z-1.5", + "translate-z-10", + "translate-z-11", + "translate-z-12", + "translate-z-14", + "translate-z-16", + "translate-z-2", + "translate-z-2.5", + "translate-z-20", + "translate-z-24", + "translate-z-28", "translate-z-3", + "translate-z-3.5", + "translate-z-32", + "translate-z-36", "translate-z-4", + "translate-z-40", + "translate-z-44", + "translate-z-48", + "translate-z-5", + "translate-z-52", + "translate-z-56", + "translate-z-6", + "translate-z-60", + "translate-z-64", + "translate-z-7", + "translate-z-72", + "translate-z-8", + "translate-z-80", + "translate-z-9", + "translate-z-96", "translate-z-px", "truncate", "underline", @@ -3807,19 +6867,52 @@ exports[`getClassList 1`] = ` "via-transparent/95", "via-transparent/100", "visible", + "w-0", "w-0.5", "w-1", + "w-1.5", + "w-10", + "w-11", + "w-12", + "w-14", + "w-16", + "w-2", + "w-2.5", + "w-20", + "w-24", + "w-28", "w-3", + "w-3.5", + "w-32", + "w-36", "w-4", - "w-4", + "w-40", + "w-44", + "w-48", + "w-5", + "w-52", + "w-56", + "w-6", + "w-60", + "w-64", + "w-7", + "w-72", + "w-8", + "w-80", + "w-9", + "w-96", "w-auto", + "w-dvh", "w-dvw", "w-fit", "w-full", + "w-lvh", "w-lvw", "w-max", "w-min", + "w-px", "w-screen", + "w-svh", "w-svw", "whitespace-break-spaces", "whitespace-normal", @@ -4485,9 +7578,7 @@ exports[`getVariants 1`] = ` "isArbitrary": true, "name": "@max", "selectors": [Function], - "values": [ - "4", - ], + "values": [], }, { "hasDash": true, @@ -4501,9 +7592,7 @@ exports[`getVariants 1`] = ` "isArbitrary": true, "name": "@min", "selectors": [Function], - "values": [ - "4", - ], + "values": [], }, { "hasDash": true, diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index d787b1420cc5..5faaaabd11ea 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -8,11 +8,6 @@ const css = String.raw function loadDesignSystem() { let theme = new Theme() - theme.add('--spacing-0_5', '0.125rem') - theme.add('--spacing-1', '0.25rem') - theme.add('--spacing-3', '0.75rem') - theme.add('--spacing-4', '1rem') - theme.add('--width-4', '1rem') theme.add('--colors-red-500', 'red') theme.add('--colors-blue-500', 'blue') theme.add('--breakpoint-sm', '640px') diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 5f8eeb238cd6..d603ccc6be4a 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1511,40 +1511,78 @@ test('margin', async () => { ).toEqual('') }) -test('margin-x', async () => { +test('mx', async () => { expect( await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['mx-auto', 'mx-4', 'mx-[4px]', '-mx-4', '-mx-[var(--value)]'], + [ + 'mx-auto', + 'mx-1', + 'mx-4', + 'mx-99', + 'mx-big', + 'mx-[4px]', + '-mx-4', + '-mx-big', + '-mx-[4px]', + 'mx-[var(--my-var)]', + '-mx-[var(--my-var)]', + ], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; } .-mx-4 { - margin-inline: calc(var(--spacing-4, 1rem) * -1); + margin-inline: calc(var(--spacing, .25rem) * -4); + } + + .-mx-\\[4px\\] { + margin-inline: -4px; + } + + .-mx-\\[var\\(--my-var\\)\\] { + margin-inline: calc(var(--my-var) * -1); + } + + .-mx-big { + margin-inline: calc(var(--spacing-big, 100rem) * -1); } - .-mx-\\[var\\(--value\\)\\] { - margin-inline: calc(var(--value) * -1); + .mx-1 { + margin-inline: calc(var(--spacing, .25rem) * 1); } .mx-4 { - margin-inline: var(--spacing-4, 1rem); + margin-inline: calc(var(--spacing, .25rem) * 4); + } + + .mx-99 { + margin-inline: calc(var(--spacing, .25rem) * 99); } .mx-\\[4px\\] { margin-inline: 4px; } + .mx-\\[var\\(--my-var\\)\\] { + margin-inline: var(--my-var); + } + .mx-auto { margin-inline: auto; + } + + .mx-big { + margin-inline: var(--spacing-big, 100rem); }" `) expect( @@ -1559,40 +1597,78 @@ test('margin-x', async () => { ).toEqual('') }) -test('margin-y', async () => { +test('my', async () => { expect( await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['my-auto', 'my-4', 'my-[4px]', '-my-4', '-my-[var(--value)]'], + [ + 'my-1', + 'my-99', + 'my-2.5', + 'my-big', + 'my-[4px]', + '-my-4', + '-my-2.5', + '-my-big', + '-my-[4px]', + 'my-[var(--my-var)]', + '-my-[var(--my-var)]', + ], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .-my-2\\.5 { + margin-block: calc(var(--spacing, .25rem) * -2.5); } .-my-4 { - margin-block: calc(var(--spacing-4, 1rem) * -1); + margin-block: calc(var(--spacing, .25rem) * -4); } - .-my-\\[var\\(--value\\)\\] { - margin-block: calc(var(--value) * -1); + .-my-\\[4px\\] { + margin-block: -4px; } - .my-4 { - margin-block: var(--spacing-4, 1rem); + .-my-\\[var\\(--my-var\\)\\] { + margin-block: calc(var(--my-var) * -1); + } + + .-my-big { + margin-block: calc(var(--spacing-big, 100rem) * -1); + } + + .my-1 { + margin-block: calc(var(--spacing, .25rem) * 1); + } + + .my-2\\.5 { + margin-block: calc(var(--spacing, .25rem) * 2.5); + } + + .my-99 { + margin-block: calc(var(--spacing, .25rem) * 99); } .my-\\[4px\\] { margin-block: 4px; } - .my-auto { - margin-block: auto; + .my-\\[var\\(--my-var\\)\\] { + margin-block: var(--my-var); + } + + .my-big { + margin-block: var(--spacing-big, 100rem); }" `) expect( @@ -1607,40 +1683,78 @@ test('margin-y', async () => { ).toEqual('') }) -test('margin-top', async () => { +test('mt', async () => { expect( await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['mt-auto', 'mt-4', 'mt-[4px]', '-mt-4', '-mt-[var(--value)]'], + [ + 'mt-1', + 'mt-99', + 'mt-2.5', + 'mt-big', + 'mt-[4px]', + '-mt-4', + '-mt-2.5', + '-mt-big', + '-mt-[4px]', + 'mt-[var(--my-var)]', + '-mt-[var(--my-var)]', + ], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .-mt-2\\.5 { + margin-top: calc(var(--spacing, .25rem) * -2.5); } .-mt-4 { - margin-top: calc(var(--spacing-4, 1rem) * -1); + margin-top: calc(var(--spacing, .25rem) * -4); } - .-mt-\\[var\\(--value\\)\\] { - margin-top: calc(var(--value) * -1); + .-mt-\\[4px\\] { + margin-top: -4px; } - .mt-4 { - margin-top: var(--spacing-4, 1rem); + .-mt-\\[var\\(--my-var\\)\\] { + margin-top: calc(var(--my-var) * -1); + } + + .-mt-big { + margin-top: calc(var(--spacing-big, 100rem) * -1); + } + + .mt-1 { + margin-top: calc(var(--spacing, .25rem) * 1); + } + + .mt-2\\.5 { + margin-top: calc(var(--spacing, .25rem) * 2.5); + } + + .mt-99 { + margin-top: calc(var(--spacing, .25rem) * 99); } .mt-\\[4px\\] { margin-top: 4px; } - .mt-auto { - margin-top: auto; + .mt-\\[var\\(--my-var\\)\\] { + margin-top: var(--my-var); + } + + .mt-big { + margin-top: var(--spacing-big, 100rem); }" `) expect( @@ -1655,40 +1769,78 @@ test('margin-top', async () => { ).toEqual('') }) -test('margin-inline-start', async () => { +test('ms', async () => { expect( await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['ms-auto', 'ms-4', 'ms-[4px]', '-ms-4', '-ms-[var(--value)]'], + [ + 'ms-1', + 'ms-99', + 'ms-2.5', + 'ms-big', + 'ms-[4px]', + '-ms-4', + '-ms-2.5', + '-ms-big', + '-ms-[4px]', + 'ms-[var(--my-var)]', + '-ms-[var(--my-var)]', + ], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .-ms-2\\.5 { + margin-inline-start: calc(var(--spacing, .25rem) * -2.5); } .-ms-4 { - margin-inline-start: calc(var(--spacing-4, 1rem) * -1); + margin-inline-start: calc(var(--spacing, .25rem) * -4); } - .-ms-\\[var\\(--value\\)\\] { - margin-inline-start: calc(var(--value) * -1); + .-ms-\\[4px\\] { + margin-inline-start: -4px; } - .ms-4 { - margin-inline-start: var(--spacing-4, 1rem); + .-ms-\\[var\\(--my-var\\)\\] { + margin-inline-start: calc(var(--my-var) * -1); + } + + .-ms-big { + margin-inline-start: calc(var(--spacing-big, 100rem) * -1); + } + + .ms-1 { + margin-inline-start: calc(var(--spacing, .25rem) * 1); + } + + .ms-2\\.5 { + margin-inline-start: calc(var(--spacing, .25rem) * 2.5); + } + + .ms-99 { + margin-inline-start: calc(var(--spacing, .25rem) * 99); } .ms-\\[4px\\] { margin-inline-start: 4px; } - .ms-auto { - margin-inline-start: auto; + .ms-\\[var\\(--my-var\\)\\] { + margin-inline-start: var(--my-var); + } + + .ms-big { + margin-inline-start: var(--spacing-big, 100rem); }" `) expect( @@ -1703,40 +1855,78 @@ test('margin-inline-start', async () => { ).toEqual('') }) -test('margin-inline-end', async () => { +test('me', async () => { expect( await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['me-auto', 'me-4', 'me-[4px]', '-me-4', '-me-[var(--value)]'], + [ + 'me-1', + 'me-99', + 'me-2.5', + 'me-big', + 'me-[4px]', + '-me-4', + '-me-2.5', + '-me-big', + '-me-[4px]', + 'me-[var(--my-var)]', + '-me-[var(--my-var)]', + ], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .-me-2\\.5 { + margin-inline-end: calc(var(--spacing, .25rem) * -2.5); } .-me-4 { - margin-inline-end: calc(var(--spacing-4, 1rem) * -1); + margin-inline-end: calc(var(--spacing, .25rem) * -4); } - .-me-\\[var\\(--value\\)\\] { - margin-inline-end: calc(var(--value) * -1); + .-me-\\[4px\\] { + margin-inline-end: -4px; } - .me-4 { - margin-inline-end: var(--spacing-4, 1rem); + .-me-\\[var\\(--my-var\\)\\] { + margin-inline-end: calc(var(--my-var) * -1); + } + + .-me-big { + margin-inline-end: calc(var(--spacing-big, 100rem) * -1); + } + + .me-1 { + margin-inline-end: calc(var(--spacing, .25rem) * 1); + } + + .me-2\\.5 { + margin-inline-end: calc(var(--spacing, .25rem) * 2.5); + } + + .me-99 { + margin-inline-end: calc(var(--spacing, .25rem) * 99); } .me-\\[4px\\] { margin-inline-end: 4px; } - .me-auto { - margin-inline-end: auto; + .me-\\[var\\(--my-var\\)\\] { + margin-inline-end: var(--my-var); + } + + .me-big { + margin-inline-end: var(--spacing-big, 100rem); }" `) expect( @@ -1751,40 +1941,78 @@ test('margin-inline-end', async () => { ).toEqual('') }) -test('margin-right', async () => { +test('mr', async () => { expect( await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['mr-auto', 'mr-4', 'mr-[4px]', '-mr-4', '-mr-[var(--value)]'], + [ + 'mr-1', + 'mr-99', + 'mr-2.5', + 'mr-big', + 'mr-[4px]', + '-mr-4', + '-mr-2.5', + '-mr-big', + '-mr-[4px]', + 'mr-[var(--my-var)]', + '-mr-[var(--my-var)]', + ], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .-mr-2\\.5 { + margin-right: calc(var(--spacing, .25rem) * -2.5); } .-mr-4 { - margin-right: calc(var(--spacing-4, 1rem) * -1); + margin-right: calc(var(--spacing, .25rem) * -4); } - .-mr-\\[var\\(--value\\)\\] { - margin-right: calc(var(--value) * -1); + .-mr-\\[4px\\] { + margin-right: -4px; } - .mr-4 { - margin-right: var(--spacing-4, 1rem); + .-mr-\\[var\\(--my-var\\)\\] { + margin-right: calc(var(--my-var) * -1); + } + + .-mr-big { + margin-right: calc(var(--spacing-big, 100rem) * -1); + } + + .mr-1 { + margin-right: calc(var(--spacing, .25rem) * 1); + } + + .mr-2\\.5 { + margin-right: calc(var(--spacing, .25rem) * 2.5); + } + + .mr-99 { + margin-right: calc(var(--spacing, .25rem) * 99); } .mr-\\[4px\\] { margin-right: 4px; } - .mr-auto { - margin-right: auto; + .mr-\\[var\\(--my-var\\)\\] { + margin-right: var(--my-var); + } + + .mr-big { + margin-right: var(--spacing-big, 100rem); }" `) expect( @@ -1799,40 +2027,78 @@ test('margin-right', async () => { ).toEqual('') }) -test('margin-bottom', async () => { +test('mb', async () => { expect( await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['mb-auto', 'mb-4', 'mb-[4px]', '-mb-4', '-mb-[var(--value)]'], + [ + 'mb-1', + 'mb-99', + 'mb-2.5', + 'mb-big', + 'mb-[4px]', + '-mb-4', + '-mb-2.5', + '-mb-big', + '-mb-[4px]', + 'mb-[var(--my-var)]', + '-mb-[var(--my-var)]', + ], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .-mb-2\\.5 { + margin-bottom: calc(var(--spacing, .25rem) * -2.5); } .-mb-4 { - margin-bottom: calc(var(--spacing-4, 1rem) * -1); + margin-bottom: calc(var(--spacing, .25rem) * -4); } - .-mb-\\[var\\(--value\\)\\] { - margin-bottom: calc(var(--value) * -1); + .-mb-\\[4px\\] { + margin-bottom: -4px; } - .mb-4 { - margin-bottom: var(--spacing-4, 1rem); + .-mb-\\[var\\(--my-var\\)\\] { + margin-bottom: calc(var(--my-var) * -1); + } + + .-mb-big { + margin-bottom: calc(var(--spacing-big, 100rem) * -1); + } + + .mb-1 { + margin-bottom: calc(var(--spacing, .25rem) * 1); + } + + .mb-2\\.5 { + margin-bottom: calc(var(--spacing, .25rem) * 2.5); + } + + .mb-99 { + margin-bottom: calc(var(--spacing, .25rem) * 99); } .mb-\\[4px\\] { margin-bottom: 4px; } - .mb-auto { - margin-bottom: auto; + .mb-\\[var\\(--my-var\\)\\] { + margin-bottom: var(--my-var); + } + + .mb-big { + margin-bottom: var(--spacing-big, 100rem); }" `) expect( @@ -1847,40 +2113,78 @@ test('margin-bottom', async () => { ).toEqual('') }) -test('margin-left', async () => { +test('ml', async () => { expect( await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['ml-auto', 'ml-4', 'ml-[4px]', '-ml-4', '-ml-[var(--value)]'], + [ + 'ml-1', + 'ml-99', + 'ml-2.5', + 'ml-big', + 'ml-[4px]', + '-ml-4', + '-ml-2.5', + '-ml-big', + '-ml-[4px]', + 'ml-[var(--my-var)]', + '-ml-[var(--my-var)]', + ], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .-ml-2\\.5 { + margin-left: calc(var(--spacing, .25rem) * -2.5); } .-ml-4 { - margin-left: calc(var(--spacing-4, 1rem) * -1); + margin-left: calc(var(--spacing, .25rem) * -4); } - .-ml-\\[var\\(--value\\)\\] { - margin-left: calc(var(--value) * -1); + .-ml-\\[4px\\] { + margin-left: -4px; } - .ml-4 { - margin-left: var(--spacing-4, 1rem); + .-ml-\\[var\\(--my-var\\)\\] { + margin-left: calc(var(--my-var) * -1); + } + + .-ml-big { + margin-left: calc(var(--spacing-big, 100rem) * -1); + } + + .ml-1 { + margin-left: calc(var(--spacing, .25rem) * 1); + } + + .ml-2\\.5 { + margin-left: calc(var(--spacing, .25rem) * 2.5); + } + + .ml-99 { + margin-left: calc(var(--spacing, .25rem) * 99); } .ml-\\[4px\\] { margin-left: 4px; } - .ml-auto { - margin-left: auto; + .ml-\\[var\\(--my-var\\)\\] { + margin-left: var(--my-var); + } + + .ml-big { + margin-left: var(--spacing-big, 100rem); }" `) expect( @@ -3435,35 +3739,30 @@ test('translate', async () => { ".-translate-\\[var\\(--value\\)\\] { --tw-translate-x: calc(var(--value) * -1); --tw-translate-y: calc(var(--value) * -1); - --tw-translate-z: calc(var(--value) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-full { --tw-translate-x: -100%; --tw-translate-y: -100%; - --tw-translate-z: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-1\\/2 { --tw-translate-x: calc(1 / 2 * 100%); --tw-translate-y: calc(1 / 2 * 100%); - --tw-translate-z: calc(1 / 2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-\\[123px\\] { --tw-translate-x: 123px; --tw-translate-y: 123px; - --tw-translate-z: 123px; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-full { --tw-translate-x: 100%; --tw-translate-y: 100%; - --tw-translate-z: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } @@ -5684,14 +5983,6 @@ test('scroll-p', async () => { --spacing-4: 1rem; } - .-scroll-p-4 { - scroll-padding: calc(var(--spacing-4, 1rem) * -1); - } - - .-scroll-p-\\[var\\(--value\\)\\] { - scroll-padding: calc(var(--value) * -1); - } - .scroll-p-4 { scroll-padding: var(--spacing-4, 1rem); } @@ -5727,14 +6018,6 @@ test('scroll-px', async () => { --spacing-4: 1rem; } - .-scroll-px-4 { - scroll-padding-inline: calc(var(--spacing-4, 1rem) * -1); - } - - .-scroll-px-\\[var\\(--value\\)\\] { - scroll-padding-inline: calc(var(--value) * -1); - } - .scroll-px-4 { scroll-padding-inline: var(--spacing-4, 1rem); } @@ -5770,14 +6053,6 @@ test('scroll-py', async () => { --spacing-4: 1rem; } - .-scroll-py-4 { - scroll-padding-block: calc(var(--spacing-4, 1rem) * -1); - } - - .-scroll-py-\\[var\\(--value\\)\\] { - scroll-padding-block: calc(var(--value) * -1); - } - .scroll-py-4 { scroll-padding-block: var(--spacing-4, 1rem); } @@ -5813,14 +6088,6 @@ test('scroll-ps', async () => { --spacing-4: 1rem; } - .-scroll-ps-4 { - scroll-padding-inline-start: calc(var(--spacing-4, 1rem) * -1); - } - - .-scroll-ps-\\[var\\(--value\\)\\] { - scroll-padding-inline-start: calc(var(--value) * -1); - } - .scroll-ps-4 { scroll-padding-inline-start: var(--spacing-4, 1rem); } @@ -5856,14 +6123,6 @@ test('scroll-pe', async () => { --spacing-4: 1rem; } - .-scroll-pe-4 { - scroll-padding-inline-end: calc(var(--spacing-4, 1rem) * -1); - } - - .-scroll-pe-\\[var\\(--value\\)\\] { - scroll-padding-inline-end: calc(var(--value) * -1); - } - .scroll-pe-4 { scroll-padding-inline-end: var(--spacing-4, 1rem); } @@ -5899,14 +6158,6 @@ test('scroll-pt', async () => { --spacing-4: 1rem; } - .-scroll-pt-4 { - scroll-padding-top: calc(var(--spacing-4, 1rem) * -1); - } - - .-scroll-pt-\\[var\\(--value\\)\\] { - scroll-padding-top: calc(var(--value) * -1); - } - .scroll-pt-4 { scroll-padding-top: var(--spacing-4, 1rem); } @@ -5942,14 +6193,6 @@ test('scroll-pr', async () => { --spacing-4: 1rem; } - .-scroll-pr-4 { - scroll-padding-right: calc(var(--spacing-4, 1rem) * -1); - } - - .-scroll-pr-\\[var\\(--value\\)\\] { - scroll-padding-right: calc(var(--value) * -1); - } - .scroll-pr-4 { scroll-padding-right: var(--spacing-4, 1rem); } @@ -5985,14 +6228,6 @@ test('scroll-pb', async () => { --spacing-4: 1rem; } - .-scroll-pb-4 { - scroll-padding-bottom: calc(var(--spacing-4, 1rem) * -1); - } - - .-scroll-pb-\\[var\\(--value\\)\\] { - scroll-padding-bottom: calc(var(--value) * -1); - } - .scroll-pb-4 { scroll-padding-bottom: var(--spacing-4, 1rem); } @@ -6028,14 +6263,6 @@ test('scroll-pl', async () => { --spacing-4: 1rem; } - .-scroll-pl-4 { - scroll-padding-left: calc(var(--spacing-4, 1rem) * -1); - } - - .-scroll-pl-\\[var\\(--value\\)\\] { - scroll-padding-left: calc(var(--value) * -1); - } - .scroll-pl-4 { scroll-padding-left: var(--spacing-4, 1rem); } @@ -11586,23 +11813,37 @@ test('p', async () => { await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['p-4', 'p-[4px]'], + ['p-1', 'p-4', 'p-99', 'p-big', 'p-[4px]'], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .p-1 { + padding: calc(var(--spacing, .25rem) * 1); } .p-4 { - padding: var(--spacing-4, 1rem); + padding: calc(var(--spacing, .25rem) * 4); + } + + .p-99 { + padding: calc(var(--spacing, .25rem) * 99); } .p-\\[4px\\] { padding: 4px; + } + + .p-big { + padding: var(--spacing-big, 100rem); }" `) expect(await run(['p', '-p-4', '-p-[4px]', 'p-4/foo', 'p-[4px]/foo'])).toEqual('') @@ -11613,23 +11854,37 @@ test('px', async () => { await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['px-4', 'px-[4px]'], + ['px-1', 'px-99', 'px-2.5', 'px-big', 'px-[4px]'], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .px-1 { + padding-inline: calc(var(--spacing, .25rem) * 1); + } + + .px-2\\.5 { + padding-inline: calc(var(--spacing, .25rem) * 2.5); } - .px-4 { - padding-inline: var(--spacing-4, 1rem); + .px-99 { + padding-inline: calc(var(--spacing, .25rem) * 99); } .px-\\[4px\\] { padding-inline: 4px; + } + + .px-big { + padding-inline: var(--spacing-big, 100rem); }" `) expect(await run(['px', '-px-4', '-px-[4px]', 'px-4/foo', 'px-[4px]/foo'])).toEqual('') @@ -11640,23 +11895,37 @@ test('py', async () => { await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['py-4', 'py-[4px]'], + ['py-1', 'py-4', 'py-99', 'py-big', 'py-[4px]'], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .py-1 { + padding-block: calc(var(--spacing, .25rem) * 1); } .py-4 { - padding-block: var(--spacing-4, 1rem); + padding-block: calc(var(--spacing, .25rem) * 4); + } + + .py-99 { + padding-block: calc(var(--spacing, .25rem) * 99); } .py-\\[4px\\] { padding-block: 4px; + } + + .py-big { + padding-block: var(--spacing-big, 100rem); }" `) expect(await run(['py', '-py-4', '-py-[4px]', 'py-4/foo', 'py-[4px]/foo'])).toEqual('') @@ -11667,23 +11936,37 @@ test('pt', async () => { await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['pt-4', 'pt-[4px]'], + ['pt-1', 'pt-4', 'pt-99', 'pt-big', 'pt-[4px]'], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .pt-1 { + padding-top: calc(var(--spacing, .25rem) * 1); } .pt-4 { - padding-top: var(--spacing-4, 1rem); + padding-top: calc(var(--spacing, .25rem) * 4); + } + + .pt-99 { + padding-top: calc(var(--spacing, .25rem) * 99); } .pt-\\[4px\\] { padding-top: 4px; + } + + .pt-big { + padding-top: var(--spacing-big, 100rem); }" `) expect(await run(['pt', '-pt-4', '-pt-[4px]', 'pt-4/foo', 'pt-[4px]/foo'])).toEqual('') @@ -11694,23 +11977,37 @@ test('ps', async () => { await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['ps-4', 'ps-[4px]'], + ['ps-1', 'ps-4', 'ps-99', 'ps-big', 'ps-[4px]'], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .ps-1 { + padding-inline-start: calc(var(--spacing, .25rem) * 1); } .ps-4 { - padding-inline-start: var(--spacing-4, 1rem); + padding-inline-start: calc(var(--spacing, .25rem) * 4); + } + + .ps-99 { + padding-inline-start: calc(var(--spacing, .25rem) * 99); } .ps-\\[4px\\] { padding-inline-start: 4px; + } + + .ps-big { + padding-inline-start: var(--spacing-big, 100rem); }" `) expect(await run(['ps', '-ps-4', '-ps-[4px]', 'ps-4/foo', 'ps-[4px]/foo'])).toEqual('') @@ -11721,23 +12018,37 @@ test('pe', async () => { await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['pe-4', 'pe-[4px]'], + ['pe-1', 'pe-4', 'pe-99', 'pe-big', 'pe-[4px]'], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .pe-1 { + padding-inline-end: calc(var(--spacing, .25rem) * 1); } .pe-4 { - padding-inline-end: var(--spacing-4, 1rem); + padding-inline-end: calc(var(--spacing, .25rem) * 4); + } + + .pe-99 { + padding-inline-end: calc(var(--spacing, .25rem) * 99); } .pe-\\[4px\\] { padding-inline-end: 4px; + } + + .pe-big { + padding-inline-end: var(--spacing-big, 100rem); }" `) expect(await run(['pe', '-pe-4', '-pe-[4px]', 'pe-4/foo', 'pe-[4px]/foo'])).toEqual('') @@ -11748,23 +12059,37 @@ test('pr', async () => { await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['pr-4', 'pr-[4px]'], + ['pr-1', 'pr-4', 'pr-99', 'pr-big', 'pr-[4px]'], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .pr-1 { + padding-right: calc(var(--spacing, .25rem) * 1); } .pr-4 { - padding-right: var(--spacing-4, 1rem); + padding-right: calc(var(--spacing, .25rem) * 4); + } + + .pr-99 { + padding-right: calc(var(--spacing, .25rem) * 99); } .pr-\\[4px\\] { padding-right: 4px; + } + + .pr-big { + padding-right: var(--spacing-big, 100rem); }" `) expect(await run(['pr', '-pr-4', '-pr-[4px]', 'pr-4/foo', 'pr-[4px]/foo'])).toEqual('') @@ -11775,23 +12100,37 @@ test('pb', async () => { await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['pb-4', 'pb-[4px]'], + ['pb-1', 'pb-4', 'pb-99', 'pb-big', 'pb-[4px]'], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .pb-1 { + padding-bottom: calc(var(--spacing, .25rem) * 1); } .pb-4 { - padding-bottom: var(--spacing-4, 1rem); + padding-bottom: calc(var(--spacing, .25rem) * 4); + } + + .pb-99 { + padding-bottom: calc(var(--spacing, .25rem) * 99); } .pb-\\[4px\\] { padding-bottom: 4px; + } + + .pb-big { + padding-bottom: var(--spacing-big, 100rem); }" `) expect(await run(['pb', '-pb-4', '-pb-[4px]', 'pb-4/foo', 'pb-[4px]/foo'])).toEqual('') @@ -11802,23 +12141,37 @@ test('pl', async () => { await compileCss( css` @theme { - --spacing-4: 1rem; + --spacing: 0.25rem; + --spacing-big: 100rem; } @tailwind utilities; `, - ['pl-4', 'pl-[4px]'], + ['pl-1', 'pl-4', 'pl-99', 'pl-big', 'pl-[4px]'], ), ).toMatchInlineSnapshot(` ":root { - --spacing-4: 1rem; + --spacing: .25rem; + --spacing-big: 100rem; + } + + .pl-1 { + padding-left: calc(var(--spacing, .25rem) * 1); } .pl-4 { - padding-left: var(--spacing-4, 1rem); + padding-left: calc(var(--spacing, .25rem) * 4); + } + + .pl-99 { + padding-left: calc(var(--spacing, .25rem) * 99); } .pl-\\[4px\\] { padding-left: 4px; + } + + .pl-big { + padding-left: var(--spacing-big, 100rem); }" `) expect(await run(['pl', '-pl-4', '-pl-[4px]', 'pl-4/foo', 'pl-[4px]/foo'])).toEqual('') @@ -15740,6 +16093,78 @@ test('@container', async () => { ).toEqual('') }) +describe('spacing utilities', () => { + test('`--spacing: initial` disables the spacing multiplier', async () => { + let { build } = await compile(css` + @theme { + --spacing: initial; + --spacing-4: 1rem; + } + @tailwind utilities; + `) + let compiled = build(['px-1', 'px-4']) + + expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` + ":root { + --spacing-4: 1rem; + } + + .px-4 { + padding-inline: var(--spacing-4, 1rem); + }" + `) + }) + + test('`--spacing-*: initial` disables the spacing multiplier', async () => { + let { build } = await compile(css` + @theme { + --spacing-*: initial; + --spacing-4: 1rem; + } + @tailwind utilities; + `) + let compiled = build(['px-1', 'px-4']) + + expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` + ":root { + --spacing-4: 1rem; + } + + .px-4 { + padding-inline: var(--spacing-4, 1rem); + }" + `) + }) + + test('only multiples of 0.25 with no trailing zeroes are supported with the spacing multipler', async () => { + let { build } = await compile(css` + @theme { + --spacing: 4px; + } + @tailwind utilities; + `) + let compiled = build(['px-0.25', 'px-1.5', 'px-2.75', 'px-0.375', 'px-2.50', 'px-.75']) + + expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` + ":root { + --spacing: 4px; + } + + .px-0\\.25 { + padding-inline: calc(var(--spacing, 4px) * .25); + } + + .px-1\\.5 { + padding-inline: calc(var(--spacing, 4px) * 1.5); + } + + .px-2\\.75 { + padding-inline: calc(var(--spacing, 4px) * 2.75); + }" + `) + }) +}) + describe('custom utilities', () => { test('custom static utility', async () => { let { build } = await compile(css` diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 23250cf44b21..52ed303c1d15 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -256,6 +256,7 @@ export function createUtilities(theme: Theme) { ignoredThemeKeys?: ThemeKey[] defaultValue?: string | null handleBareValue?: (value: NamedUtilityValue) => string | null + handleNegativeBareValue?: (value: NamedUtilityValue) => string | null handle: (value: string) => AstNode[] | undefined } @@ -301,6 +302,12 @@ export function createUtilities(theme: Theme) { // If there is still no value but the utility supports bare values, then // use the bare candidate value as the value. + if (value === null && candidate.negative && desc.handleNegativeBareValue) { + value = desc.handleNegativeBareValue(candidate.value) + if (!value?.includes('/') && candidate.modifier) return + if (value !== null) return desc.handle(value) + } + if (value === null && desc.handleBareValue) { value = desc.handleBareValue(candidate.value) if (!value?.includes('/') && candidate.modifier) return @@ -371,6 +378,92 @@ export function createUtilities(theme: Theme) { ]) } + function spacingUtility( + name: string, + themeNamespace: ThemeKey | ThemeKey[], + handle: (value: string) => AstNode[] | undefined, + { + supportsNegative = false, + supportsFractions = false, + ignoredThemeKeys = [], + }: { + supportsNegative?: boolean + supportsFractions?: boolean + ignoredThemeKeys?: ThemeKey[] + } = {}, + ) { + utilities.static(`${name}-px`, (candidate) => { + if (!supportsNegative && candidate.negative) return + return handle(candidate.negative ? '-1px' : '1px') + }) + let themeKeys = ([] as ThemeKey[]).concat(themeNamespace, '--spacing') + functionalUtility(name, { + themeKeys, + ignoredThemeKeys, + supportsFractions, + supportsNegative, + handleBareValue: ({ value }) => { + let multiplier = theme.resolve(null, ['--spacing']) + if (!multiplier) return null + + let num = Number(value) + if (num < 0 || num % 0.25 !== 0 || String(num) !== value) return null + + return `calc(${multiplier} * ${value})` + }, + handleNegativeBareValue: ({ value }) => { + let multiplier = theme.resolve(null, ['--spacing']) + if (!multiplier) return null + return `calc(${multiplier} * -${value})` + }, + handle, + }) + + suggest(name, () => [ + { + values: [ + '0', + '0.5', + '1', + '1.5', + '2', + '2.5', + '3', + '3.5', + '4', + '5', + '6', + '7', + '8', + '9', + '10', + '11', + '12', + '14', + '16', + '20', + '24', + '28', + '32', + '36', + '40', + '44', + '48', + '52', + '56', + '60', + '64', + '72', + '80', + '96', + ], + supportsNegative, + valueThemeKeys: themeKeys, + ignoredThemeKeys: ignoredThemeKeys ?? [], + }, + ]) + } + /** * ---------------- * Utility matchers @@ -424,123 +517,28 @@ export function createUtilities(theme: Theme) { /** * @css `inset` */ - staticUtility('inset-auto', [['inset', 'auto']]) - utilities.static('inset-full', (candidate) => { - let value = candidate.negative ? '-100%' : '100%' - return [decl('inset', value)] - }) - functionalUtility('inset', { - supportsNegative: true, - supportsFractions: true, - themeKeys: ['--inset', '--spacing'], - ignoredThemeKeys: ['--inset-ring', '--inset-shadow'], - handle: (value) => [decl('inset', value)], - }) - - staticUtility('inset-x-auto', [['inset-inline', 'auto']]) - - utilities.static('inset-x-full', (candidate) => { - let value = candidate.negative ? '-100%' : '100%' - return [decl('inset-inline', value)] - }) - functionalUtility('inset-x', { - supportsNegative: true, - supportsFractions: true, - themeKeys: ['--inset', '--spacing'], - ignoredThemeKeys: ['--inset-ring', '--inset-shadow'], - handle: (value) => [decl('inset-inline', value)], - }) - - staticUtility('inset-y-auto', [['inset-block', 'auto']]) - utilities.static('inset-y-full', (candidate) => { - let value = candidate.negative ? '-100%' : '100%' - return [decl('inset-block', value)] - }) - functionalUtility('inset-y', { - supportsNegative: true, - supportsFractions: true, - themeKeys: ['--inset', '--spacing'], - ignoredThemeKeys: ['--inset-ring', '--inset-shadow'], - handle: (value) => [decl('inset-block', value)], - }) - - staticUtility('start-auto', [['inset-inline-start', 'auto']]) - utilities.static('start-full', (candidate) => { - let value = candidate.negative ? '-100%' : '100%' - return [decl('inset-inline-start', value)] - }) - functionalUtility('start', { - supportsNegative: true, - supportsFractions: true, - themeKeys: ['--inset', '--spacing'], - ignoredThemeKeys: ['--inset-ring', '--inset-shadow'], - handle: (value) => [decl('inset-inline-start', value)], - }) - - staticUtility('end-auto', [['inset-inline-end', 'auto']]) - utilities.static('end-full', (candidate) => { - let value = candidate.negative ? '-100%' : '100%' - return [decl('inset-inline-end', value)] - }) - functionalUtility('end', { - supportsNegative: true, - supportsFractions: true, - themeKeys: ['--inset', '--spacing'], - ignoredThemeKeys: ['--inset-ring', '--inset-shadow'], - handle: (value) => [decl('inset-inline-end', value)], - }) - - staticUtility('top-auto', [['top', 'auto']]) - utilities.static('top-full', (candidate) => { - let value = candidate.negative ? '-100%' : '100%' - return [decl('top', value)] - }) - functionalUtility('top', { - supportsNegative: true, - supportsFractions: true, - themeKeys: ['--inset', '--spacing'], - ignoredThemeKeys: ['--inset-ring', '--inset-shadow'], - handle: (value) => [decl('top', value)], - }) - - staticUtility('right-auto', [['right', 'auto']]) - utilities.static('right-full', (candidate) => { - let value = candidate.negative ? '-100%' : '100%' - return [decl('right', value)] - }) - functionalUtility('right', { - supportsNegative: true, - supportsFractions: true, - themeKeys: ['--inset', '--spacing'], - ignoredThemeKeys: ['--inset-ring', '--inset-shadow'], - handle: (value) => [decl('right', value)], - }) - - staticUtility('bottom-auto', [['bottom', 'auto']]) - utilities.static('bottom-full', (candidate) => { - let value = candidate.negative ? '-100%' : '100%' - return [decl('bottom', value)] - }) - functionalUtility('bottom', { - supportsNegative: true, - supportsFractions: true, - themeKeys: ['--inset', '--spacing'], - ignoredThemeKeys: ['--inset-ring', '--inset-shadow'], - handle: (value) => [decl('bottom', value)], - }) - - staticUtility('left-auto', [['left', 'auto']]) - utilities.static('left-full', (candidate) => { - let value = candidate.negative ? '-100%' : '100%' - return [decl('left', value)] - }) - functionalUtility('left', { - supportsNegative: true, - supportsFractions: true, - themeKeys: ['--inset', '--spacing'], - ignoredThemeKeys: ['--inset-ring', '--inset-shadow'], - handle: (value) => [decl('left', value)], - }) + for (let [name, property] of [ + ['inset', 'inset'], + ['inset-x', 'inset-inline'], + ['inset-y', 'inset-block'], + ['start', 'inset-inline-start'], + ['end', 'inset-inline-end'], + ['top', 'top'], + ['right', 'right'], + ['bottom', 'bottom'], + ['left', 'left'], + ] as const) { + staticUtility(`${name}-auto`, [[property, 'auto']]) + utilities.static(`${name}-full`, (candidate) => { + let value = candidate.negative ? '-100%' : '100%' + return [decl(property, value)] + }) + spacingUtility(name, '--inset', (value) => [decl(property, value)], { + supportsNegative: true, + supportsFractions: true, + ignoredThemeKeys: ['--inset-ring', '--inset-shadow'], + }) + } /** * @css `isolation` @@ -753,25 +751,20 @@ export function createUtilities(theme: Theme) { /** * @css `margin` */ - for (let [namespace, properties] of [ - ['m', ['margin']], - ['mx', ['margin-inline']], - ['my', ['margin-block']], - ['ms', ['margin-inline-start']], - ['me', ['margin-inline-end']], - ['mt', ['margin-top']], - ['mr', ['margin-right']], - ['mb', ['margin-bottom']], - ['ml', ['margin-left']], + for (let [namespace, property] of [ + ['m', 'margin'], + ['mx', 'margin-inline'], + ['my', 'margin-block'], + ['ms', 'margin-inline-start'], + ['me', 'margin-inline-end'], + ['mt', 'margin-top'], + ['mr', 'margin-right'], + ['mb', 'margin-bottom'], + ['ml', 'margin-left'], ] as const) { - staticUtility( - `${namespace}-auto`, - properties.map((property) => [property, 'auto']), - ) - functionalUtility(namespace, { + staticUtility(`${namespace}-auto`, [[property, 'auto']]) + spacingUtility(namespace, '--margin', (value) => [decl(property, value)], { supportsNegative: true, - themeKeys: ['--margin', '--spacing'], - handle: (value) => [...properties.map((property) => decl(property, value))], }) } @@ -862,11 +855,21 @@ export function createUtilities(theme: Theme) { /** * @css `size` * @css `width` + * @css `min-width` + * @css `max-width` * @css `height` + * @css `min-height` + * @css `max-height` */ for (let [key, value] of [ ['auto', 'auto'], ['full', '100%'], + ['svw', '100svw'], + ['lvw', '100lvw'], + ['dvw', '100dvw'], + ['svh', '100svh'], + ['lvh', '100lvh'], + ['dvh', '100dvh'], ['min', 'min-content'], ['max', 'max-content'], ['fit', 'fit-content'], @@ -876,132 +879,47 @@ export function createUtilities(theme: Theme) { ['width', value], ['height', value], ]) - } - functionalUtility('size', { - supportsFractions: true, - themeKeys: ['--size', '--spacing'], - handle: (value) => [decl('--tw-sort', 'size'), decl('width', value), decl('height', value)], - }) - - /** - * @css `width` - */ - for (let [key, value] of [ - ['auto', 'auto'], - ['full', '100%'], - ['screen', '100vw'], - ['svw', '100svw'], - ['lvw', '100lvw'], - ['dvw', '100dvw'], - ['min', 'min-content'], - ['max', 'max-content'], - ['fit', 'fit-content'], - ]) { staticUtility(`w-${key}`, [['width', value]]) - } - functionalUtility('w', { - supportsFractions: true, - themeKeys: ['--width', '--spacing'], - handle: (value) => [decl('width', value)], - }) - - /** - * @css `min-width` - */ - for (let [key, value] of [ - ['auto', 'auto'], - ['full', '100%'], - ['min', 'min-content'], - ['max', 'max-content'], - ['fit', 'fit-content'], - ]) { staticUtility(`min-w-${key}`, [['min-width', value]]) - } - functionalUtility('min-w', { - themeKeys: ['--min-width', '--width', '--spacing'], - handle: (value) => [decl('min-width', value)], - }) - - /** - * @css `max-width` - */ - for (let [key, value] of [ - ['none', 'none'], - ['full', '100%'], - ['min', 'min-content'], - ['max', 'max-content'], - ['fit', 'fit-content'], - ]) { staticUtility(`max-w-${key}`, [['max-width', value]]) - } - functionalUtility('max-w', { - themeKeys: ['--max-width', '--width', '--spacing'], - handle: (value) => [decl('max-width', value)], - }) - - /** - * @css `height` - */ - for (let [key, value] of [ - ['auto', 'auto'], - ['full', '100%'], - ['screen', '100vh'], - ['svh', '100svh'], - ['lvh', '100lvh'], - ['dvh', '100dvh'], - ['min', 'min-content'], - ['max', 'max-content'], - ['fit', 'fit-content'], - ]) { staticUtility(`h-${key}`, [['height', value]]) - } - functionalUtility('h', { - supportsFractions: true, - themeKeys: ['--height', '--spacing'], - handle: (value) => [decl('height', value)], - }) - - /** - * @css `min-height` - */ - for (let [key, value] of [ - ['auto', 'auto'], - ['full', '100%'], - ['screen', '100vh'], - ['svh', '100svh'], - ['lvh', '100lvh'], - ['dvh', '100dvh'], - ['min', 'min-content'], - ['max', 'max-content'], - ['fit', 'fit-content'], - ]) { staticUtility(`min-h-${key}`, [['min-height', value]]) + staticUtility(`max-h-${key}`, [['max-height', value]]) } - functionalUtility('min-h', { - themeKeys: ['--min-height', '--spacing'], - handle: (value) => [decl('min-height', value)], - }) - /** - * @css `max-height` - */ - for (let [key, value] of [ - ['none', 'none'], - ['full', '100%'], - ['screen', '100vh'], - ['svh', '100svh'], - ['lvh', '100lvh'], - ['dvh', '100dvh'], - ['min', 'min-content'], - ['max', 'max-content'], - ['fit', 'fit-content'], - ]) { - staticUtility(`max-h-${key}`, [['max-height', value]]) + staticUtility(`w-screen`, [['width', '100vw']]) + staticUtility(`min-w-screen`, [['min-width', '100vw']]) + staticUtility(`max-w-screen`, [['max-width', '100vw']]) + staticUtility(`h-screen`, [['height', '100vh']]) + staticUtility(`min-h-screen`, [['min-height', '100vh']]) + staticUtility(`max-h-screen`, [['max-height', '100vh']]) + + staticUtility(`min-w-none`, [['min-width', 'none']]) + staticUtility(`max-w-none`, [['max-width', 'none']]) + staticUtility(`min-h-none`, [['min-height', 'none']]) + staticUtility(`max-h-none`, [['max-height', 'none']]) + + spacingUtility( + 'size', + ['--size'], + (value) => [decl('--tw-sort', 'size'), decl('width', value), decl('height', value)], + { + supportsFractions: true, + }, + ) + + for (let [name, namespaces, property] of [ + ['w', ['--width'], 'width'], + ['min-w', ['--min-width', '--width'], 'min-width'], + ['max-w', ['--max-width', '--width'], 'max-width'], + ['h', ['--height'], 'height'], + ['min-h', ['--min-height', '--height'], 'min-height'], + ['max-h', ['--max-height', '--height'], 'max-height'], + ] as [string, ThemeKey[], string][]) { + spacingUtility(name, namespaces, (value) => [decl(property, value)], { + supportsFractions: true, + }) } - functionalUtility('max-h', { - themeKeys: ['--max-height', '--spacing'], - handle: (value) => [decl('max-height', value)], - }) /** * @css `flex` @@ -1083,10 +1001,8 @@ export function createUtilities(theme: Theme) { */ staticUtility('basis-auto', [['flex-basis', 'auto']]) staticUtility('basis-full', [['flex-basis', '100%']]) - functionalUtility('basis', { + spacingUtility('basis', ['--flex-basis', '--width'], (value) => [decl('flex-basis', value)], { supportsFractions: true, - themeKeys: ['--flex-basis', '--width', '--spacing'], - handle: (value) => [decl('flex-basis', value)], }) /** @@ -1116,39 +1032,24 @@ export function createUtilities(theme: Theme) { /** * @css `border-spacing` */ - functionalUtility('border-spacing', { - themeKeys: ['--border-spacing', '--spacing'], - handle: (value) => [ - borderSpacingProperties(), - decl('--tw-border-spacing-x', value), - decl('--tw-border-spacing-y', value), - decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'), - ], - }) + spacingUtility('border-spacing', ['--border-spacing'], (value) => [ + borderSpacingProperties(), + decl('--tw-border-spacing-x', value), + decl('--tw-border-spacing-y', value), + decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'), + ]) - /** - * @css `border-spacing` - */ - functionalUtility('border-spacing-x', { - themeKeys: ['--border-spacing', '--spacing'], - handle: (value) => [ - borderSpacingProperties(), - decl('--tw-border-spacing-x', value), - decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'), - ], - }) + spacingUtility('border-spacing-x', ['--border-spacing'], (value) => [ + borderSpacingProperties(), + decl('--tw-border-spacing-x', value), + decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'), + ]) - /** - * @css `border-spacing` - */ - functionalUtility('border-spacing-y', { - themeKeys: ['--border-spacing', '--spacing'], - handle: (value) => [ - borderSpacingProperties(), - decl('--tw-border-spacing-y', value), - decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'), - ], - }) + spacingUtility('border-spacing-y', ['--border-spacing'], (value) => [ + borderSpacingProperties(), + decl('--tw-border-spacing-y', value), + decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'), + ]) /** * @css `transform-origin` @@ -1208,23 +1109,21 @@ export function createUtilities(theme: Theme) { translateProperties(), decl('--tw-translate-x', value), decl('--tw-translate-y', value), - decl('--tw-translate-z', value), decl('translate', 'var(--tw-translate-x) var(--tw-translate-y)'), ] }) - functionalUtility('translate', { - supportsNegative: true, - supportsFractions: true, - themeKeys: ['--translate', '--spacing'], - handle: (value) => [ + spacingUtility( + 'translate', + ['--translate'], + (value) => [ translateProperties(), decl('--tw-translate-x', value), decl('--tw-translate-y', value), - decl('--tw-translate-z', value), decl('translate', 'var(--tw-translate-x) var(--tw-translate-y)'), ], - }) + { supportsNegative: true, supportsFractions: true }, + ) for (let axis of ['x', 'y']) { let handle = (value: string) => [ @@ -1233,34 +1132,27 @@ export function createUtilities(theme: Theme) { decl('translate', `var(--tw-translate-x) var(--tw-translate-y)`), ] - /** - * @css `translate` - */ - functionalUtility(`translate-${axis}`, { + spacingUtility(`translate-${axis}`, ['--translate'], (value) => handle(value), { supportsNegative: true, supportsFractions: true, - themeKeys: ['--translate', '--spacing'], - handle, - }) - utilities.static(`translate-${axis}-px`, (candidate) => { - return handle(candidate.negative ? '-1px' : '1px') }) utilities.static(`translate-${axis}-full`, (candidate) => { return handle(candidate.negative ? '-100%' : '100%') }) } - functionalUtility(`translate-z`, { - supportsNegative: true, - supportsFractions: false, - themeKeys: ['--translate', '--spacing'], - handle: (value) => { - return [ - translateProperties(), - decl(`--tw-translate-z`, value), - decl('translate', 'var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z)'), - ] + + spacingUtility( + `translate-z`, + ['--translate'], + (value) => [ + translateProperties(), + decl(`--tw-translate-z`, value), + decl('translate', 'var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z)'), + ], + { + supportsNegative: true, }, - }) + ) utilities.static(`translate-z-px`, (candidate) => { return [ translateProperties(), @@ -1269,9 +1161,6 @@ export function createUtilities(theme: Theme) { ] }) - /** - * @css `translate` - */ staticUtility('translate-3d', [ translateProperties, ['translate', 'var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z)'], @@ -1692,114 +1581,41 @@ export function createUtilities(theme: Theme) { staticUtility('snap-normal', [['scroll-snap-stop', 'normal']]) staticUtility('snap-always', [['scroll-snap-stop', 'always']]) - functionalUtility('scroll-m', { - supportsNegative: true, - themeKeys: ['--scroll-margin', '--spacing'], - handle: (value) => [decl('scroll-margin', value)], - }) - - functionalUtility('scroll-mx', { - supportsNegative: true, - themeKeys: ['--scroll-margin', '--spacing'], - handle: (value) => [decl('scroll-margin-inline', value)], - }) - - functionalUtility('scroll-my', { - supportsNegative: true, - themeKeys: ['--scroll-margin', '--spacing'], - handle: (value) => [decl('scroll-margin-block', value)], - }) - - functionalUtility('scroll-ms', { - supportsNegative: true, - themeKeys: ['--scroll-margin', '--spacing'], - handle: (value) => [decl('scroll-margin-inline-start', value)], - }) - - functionalUtility('scroll-me', { - supportsNegative: true, - themeKeys: ['--scroll-margin', '--spacing'], - handle: (value) => [decl('scroll-margin-inline-end', value)], - }) - - functionalUtility('scroll-mt', { - supportsNegative: true, - themeKeys: ['--scroll-margin', '--spacing'], - handle: (value) => [decl('scroll-margin-top', value)], - }) - - functionalUtility('scroll-mr', { - supportsNegative: true, - themeKeys: ['--scroll-margin', '--spacing'], - handle: (value) => [decl('scroll-margin-right', value)], - }) - - functionalUtility('scroll-mb', { - supportsNegative: true, - themeKeys: ['--scroll-margin', '--spacing'], - handle: (value) => [decl('scroll-margin-bottom', value)], - }) - - functionalUtility('scroll-ml', { - supportsNegative: true, - themeKeys: ['--scroll-margin', '--spacing'], - handle: (value) => [decl('scroll-margin-left', value)], - }) - - // scroll-padding - functionalUtility('scroll-p', { - supportsNegative: true, - themeKeys: ['--scroll-padding', '--spacing'], - handle: (value) => [decl('scroll-padding', value)], - }) - - functionalUtility('scroll-px', { - supportsNegative: true, - themeKeys: ['--scroll-padding', '--spacing'], - handle: (value) => [decl('scroll-padding-inline', value)], - }) - - functionalUtility('scroll-py', { - supportsNegative: true, - themeKeys: ['--scroll-padding', '--spacing'], - handle: (value) => [decl('scroll-padding-block', value)], - }) - - functionalUtility('scroll-ps', { - supportsNegative: true, - themeKeys: ['--scroll-padding', '--spacing'], - handle: (value) => [decl('scroll-padding-inline-start', value)], - }) - - functionalUtility('scroll-pe', { - supportsNegative: true, - themeKeys: ['--scroll-padding', '--spacing'], - handle: (value) => [decl('scroll-padding-inline-end', value)], - }) - - functionalUtility('scroll-pt', { - supportsNegative: true, - themeKeys: ['--scroll-padding', '--spacing'], - handle: (value) => [decl('scroll-padding-top', value)], - }) - - functionalUtility('scroll-pr', { - supportsNegative: true, - themeKeys: ['--scroll-padding', '--spacing'], - handle: (value) => [decl('scroll-padding-right', value)], - }) - - functionalUtility('scroll-pb', { - supportsNegative: true, - themeKeys: ['--scroll-padding', '--spacing'], - handle: (value) => [decl('scroll-padding-bottom', value)], - }) + /** + * @css `scroll-margin` + */ + for (let [namespace, property] of [ + ['scroll-m', 'scroll-margin'], + ['scroll-mx', 'scroll-margin-inline'], + ['scroll-my', 'scroll-margin-block'], + ['scroll-ms', 'scroll-margin-inline-start'], + ['scroll-me', 'scroll-margin-inline-end'], + ['scroll-mt', 'scroll-margin-top'], + ['scroll-mr', 'scroll-margin-right'], + ['scroll-mb', 'scroll-margin-bottom'], + ['scroll-ml', 'scroll-margin-left'], + ] as const) { + spacingUtility(namespace, '--scroll-margin', (value) => [decl(property, value)], { + supportsNegative: true, + }) + } - functionalUtility('scroll-pl', { - supportsNegative: true, - themeKeys: ['--scroll-padding', '--spacing'], - handle: (value) => [decl('scroll-padding-left', value)], - }) + /** + * @css `scroll-padding` + */ + for (let [namespace, property] of [ + ['scroll-p', 'scroll-padding'], + ['scroll-px', 'scroll-padding-inline'], + ['scroll-py', 'scroll-padding-block'], + ['scroll-ps', 'scroll-padding-inline-start'], + ['scroll-pe', 'scroll-padding-inline-end'], + ['scroll-pt', 'scroll-padding-top'], + ['scroll-pr', 'scroll-padding-right'], + ['scroll-pb', 'scroll-padding-bottom'], + ['scroll-pl', 'scroll-padding-left'], + ] as const) { + spacingUtility(namespace, '--scroll-padding', (value) => [decl(property, value)]) + } staticUtility('list-inside', [['list-style-position', 'inside']]) staticUtility('list-outside', [['list-style-position', 'outside']]) @@ -1980,25 +1796,14 @@ export function createUtilities(theme: Theme) { staticUtility('justify-items-end', [['justify-items', 'end']]) staticUtility('justify-items-stretch', [['justify-items', 'stretch']]) - functionalUtility('gap', { - themeKeys: ['--gap', '--spacing'], - handle: (value) => [decl('gap', value)], - }) - - functionalUtility('gap-x', { - themeKeys: ['--gap', '--spacing'], - handle: (value) => [decl('column-gap', value)], - }) - - functionalUtility('gap-y', { - themeKeys: ['--gap', '--spacing'], - handle: (value) => [decl('row-gap', value)], - }) + spacingUtility('gap', ['--gap'], (value) => [decl('gap', value)]) + spacingUtility('gap-x', ['--gap'], (value) => [decl('column-gap', value)]) + spacingUtility('gap-y', ['--gap'], (value) => [decl('row-gap', value)]) - functionalUtility('space-x', { - supportsNegative: true, - themeKeys: ['--space', '--spacing'], - handle: (value) => [ + spacingUtility( + 'space-x', + ['--space'], + (value) => [ atRoot([property('--tw-space-x-reverse', '0', '')]), styleRule(':where(& > :not(:last-child))', [ @@ -2007,21 +1812,22 @@ export function createUtilities(theme: Theme) { decl('margin-inline-end', `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`), ]), ], - }) + { supportsNegative: true }, + ) - functionalUtility('space-y', { - supportsNegative: true, - themeKeys: ['--space', '--spacing'], - handle: (value) => [ + spacingUtility( + 'space-y', + ['--space'], + (value) => [ atRoot([property('--tw-space-y-reverse', '0', '')]), - styleRule(':where(& > :not(:last-child))', [ decl('--tw-sort', 'column-gap'), decl('margin-block-start', `calc(${value} * var(--tw-space-y-reverse))`), decl('margin-block-end', `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`), ]), ], - }) + { supportsNegative: true }, + ) staticUtility('space-x-reverse', [ () => atRoot([property('--tw-space-x-reverse', '0', '')]), @@ -2907,45 +2713,19 @@ export function createUtilities(theme: Theme) { handle: (value) => [decl('object-position', value)], }) - functionalUtility('p', { - themeKeys: ['--padding', '--spacing'], - handle: (value) => [decl('padding', value)], - }) - - functionalUtility('px', { - themeKeys: ['--padding', '--spacing'], - handle: (value) => [decl('padding-inline', value)], - }) - - functionalUtility('py', { - themeKeys: ['--padding', '--spacing'], - handle: (value) => [decl('padding-block', value)], - }) - - functionalUtility('pt', { - themeKeys: ['--padding', '--spacing'], - handle: (value) => [decl('padding-top', value)], - }) - functionalUtility('ps', { - themeKeys: ['--padding', '--spacing'], - handle: (value) => [decl('padding-inline-start', value)], - }) - functionalUtility('pe', { - themeKeys: ['--padding', '--spacing'], - handle: (value) => [decl('padding-inline-end', value)], - }) - functionalUtility('pr', { - themeKeys: ['--padding', '--spacing'], - handle: (value) => [decl('padding-right', value)], - }) - functionalUtility('pb', { - themeKeys: ['--padding', '--spacing'], - handle: (value) => [decl('padding-bottom', value)], - }) - functionalUtility('pl', { - themeKeys: ['--padding', '--spacing'], - handle: (value) => [decl('padding-left', value)], - }) + for (let [name, property] of [ + ['p', 'padding'], + ['px', 'padding-inline'], + ['py', 'padding-block'], + ['ps', 'padding-inline-start'], + ['pe', 'padding-inline-end'], + ['pt', 'padding-top'], + ['pr', 'padding-right'], + ['pb', 'padding-bottom'], + ['pl', 'padding-left'], + ] as const) { + spacingUtility(name, '--padding', (value) => [decl(property, value)]) + } staticUtility('text-left', [['text-align', 'left']]) staticUtility('text-center', [['text-align', 'center']]) @@ -2954,10 +2734,8 @@ export function createUtilities(theme: Theme) { staticUtility('text-start', [['text-align', 'start']]) staticUtility('text-end', [['text-align', 'end']]) - functionalUtility('indent', { + spacingUtility('indent', ['--text-indent'], (value) => [decl('text-indent', value)], { supportsNegative: true, - themeKeys: ['--text-indent', '--spacing'], - handle: (value) => [decl('text-indent', value)], }) staticUtility('align-baseline', [['vertical-align', 'baseline']]) @@ -3884,14 +3662,11 @@ export function createUtilities(theme: Theme) { staticUtility('forced-color-adjust-none', [['forced-color-adjust', 'none']]) staticUtility('forced-color-adjust-auto', [['forced-color-adjust', 'auto']]) - functionalUtility('leading', { - themeKeys: ['--line-height'], - handle: (value) => [ - atRoot([property('--tw-leading')]), - decl('--tw-leading', value), - decl('line-height', value), - ], - }) + spacingUtility('leading', ['--line-height'], (value) => [ + atRoot([property('--tw-leading')]), + decl('--tw-leading', value), + decl('line-height', value), + ]) functionalUtility('tracking', { supportsNegative: true, diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index e392114cf19d..847126c872af 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -333,41 +333,7 @@ --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); /* Spacing */ - --spacing-px: 1px; - --spacing-0: 0px; - --spacing-0_5: 0.125rem; - --spacing-1: 0.25rem; - --spacing-1_5: 0.375rem; - --spacing-2: 0.5rem; - --spacing-2_5: 0.625rem; - --spacing-3: 0.75rem; - --spacing-3_5: 0.875rem; - --spacing-4: 1rem; - --spacing-5: 1.25rem; - --spacing-6: 1.5rem; - --spacing-7: 1.75rem; - --spacing-8: 2rem; - --spacing-9: 2.25rem; - --spacing-10: 2.5rem; - --spacing-11: 2.75rem; - --spacing-12: 3rem; - --spacing-14: 3.5rem; - --spacing-16: 4rem; - --spacing-20: 5rem; - --spacing-24: 6rem; - --spacing-28: 7rem; - --spacing-32: 8rem; - --spacing-36: 9rem; - --spacing-40: 10rem; - --spacing-44: 11rem; - --spacing-48: 12rem; - --spacing-52: 13rem; - --spacing-56: 14rem; - --spacing-60: 15rem; - --spacing-64: 16rem; - --spacing-72: 18rem; - --spacing-80: 20rem; - --spacing-96: 24rem; + --spacing: 0.25rem; /* Widths */ --width-3xs: 16rem; @@ -435,14 +401,6 @@ --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; - --line-height-3: 0.75rem; - --line-height-4: 1rem; - --line-height-5: 1.25rem; - --line-height-6: 1.5rem; - --line-height-7: 1.75rem; - --line-height-8: 2rem; - --line-height-9: 2.25rem; - --line-height-10: 2.5rem; /* 3D perspectives */ --perspective-dramatic: 100px;